React Native向上滑动面板和键盘避免视图的问题答案

【问题标题】：Problem with React Native sliding up panel and keyboard avoiding viewReact Native向上滑动面板和键盘避免视图的问题
【发布时间】：2020-01-20 06:21:58
【问题描述】：

我的向上滑动面板中有一个组件，其中包含各种文本输入，我没有使用任何键盘来避免视图，但是当我尝试在向上滑动面板的文本输入中键入内容时，我的内容会自动向上滑动。当我尝试在输入字段中输入内容时，我需要找出一些方法来禁用向上滑动面板的自动向上滑动。

<SlidingUpPanel resizeToAvoidBottomInset={false} friction={0.03} ref={c => 
this._panel = c} height={height}
draggableRange={{ top: height / 1.3, bottom: 0 }}
onBottomReached={() => {
      this.setState({ showPlusIcon: true })
}}
>
    <ExpensesEntry onPress1={() => {
      this._panel.hide()
    }}  
    onPress={() => {
         this._panel.hide()
         this.setState({ showPlusIcon: true })
         this.props.expenses_store();
             setTimeout(() => {
                 this.apiCalls()
             }, 2000);
    }} />
</SlidingUpPanel>

【问题讨论】：

请添加您尝试过的代码？
再次查看帖子

标签： reactjs redux react-redux react-native-android

【解决方案1】：

让我给你我的解决方案，在我的情况下，我需要在搜索框中输入一些内容，在这种情况下，当我输入一些内容时，RN 向上滑动面板应该回到底部并执行我在下面使用的操作

componentWillMount = () => {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
};

componentWillUnmount = () => {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
};

_keyboardDidShow = () => {
    if (!this.state.bottomPanelHidden) {
        this._panel.hide();
    }
};

_keyboardDidHide = () => {
};

在这里你可以得到bottomPanelHidden的状态如下

<SlidingUpPanel friction={50} avoidKeyboard={true} allowMomentum={true} allowDragging={true}
                draggableRange={{
                    top: deviceHeight,
                    bottom: 0,
                }} showBackdrop={false}
                onBottomReached={() => {
                    this.setState({
                        bottomPanelHidden: true,
                    });
                }}
                ref={c => this._panel = c}
                containerStyle={{backgroundColor: 'white'}}>


    ...render you body here...


</SlidingUpPanel>

【讨论】：