在 react-native 中处理文本输入焦点上按钮的向上滚动事件

Question

我正在使用 react-native。 在我的情况下，当我的文本输入聚焦时，键盘弹出窗口会隐藏我的视图，其中的按钮存在。

我的代码 sn-p：

 <KeyboardAvoid>
          <View style={{flexDirection:'row',width:dwidth-20,marginHorizontal:20,marginTop:15}}>
            <TextInput 
            style={{width:width-60,fontWeight:'bold',fontSize:18,}}
            placeholder={this.state.quesText}
            autoCapitalize="words"
            onKeyPress={this.typing}
            value={this.state.questionText}
            onChangeText={ (questionText) => this.setState({questionText})}
            />
          </View>
          </KeyboardAvoid>
        </View>

        <View style={{borderBottomWidth: 0.5,paddingVertical:1,borderBottomColor: '#fff',}}/>

        <View style ={{flexDirection:'row',height:dheight/15,backgroundColor:'#fff',paddingLeft:18}}>
          <CheckBox style={{padding:5,marginBottom:2}} onClick={ () => this.setState({ showUserImg: !this.state.showUserImg,textValue: !this.state.textValue,anonymFlage:"Y"}) } checkBoxColor="#2b73e1"/>
          <Text style={{marginTop:6,fontSize:16,marginLeft:5,}}>
          {this.state.askAnonText}
          </Text>
          <View style={styles.button}>
            <TouchableOpacity activeOpacity={.5} onPress={(e) => this.formValidation()}>
             <Text style={styles.buttonText}>{Post}</Text>
            </TouchableOpacity>
          </View>
        </View>

我不想在键盘出现时隐藏“发布”按钮。当键盘出现时，如何在点击 textinput 时上移我的 Post 按钮。有什么解决办法？

Answer 1

最简单、最容易安装的解决方案是KeyboardAvoidingView。它是一个核心组件，但它的作用也很简单。这将使您的视图更自然地与键盘一起流动。

Answer 2

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
.
.
.

<KeyboardAwareScrollView>
    <View style={{flexDirection:'row',width:dwidth-20,marginHorizontal:20,marginTop:15}}>
      <TextInput  style={{width:width-60,fontWeight:'bold',fontSize:18,}}
                  placeholder={this.state.quesText}
                  autoCapitalize="words"
                  onKeyPress={this.typing}
                  value={this.state.questionText}
                  onChangeText={ (questionText) => this.setState({questionText})}
      />
    </View>
    <View style={{borderBottomWidth: 0.5,paddingVertical:1,borderBottomColor: '#fff',}}>
      <View style ={{flexDirection:'row',height:dheight/15,backgroundColor:'#fff',paddingLeft:18}}>
        <CheckBox style={{padding:5,marginBottom:2}}
                  onClick={ () => this.setState({ showUserImg:!this.state.showUserImg,textValue:!this.state.textValue,anonymFlage:"Y"})}
                  checkBoxColor="#2b73e1"/>
        <Text style={{marginTop:6,fontSize:16,marginLeft:5,}}>
          {this.state.askAnonText}
        </Text>
      </View>
      <View style={styles.button}>
        <TouchableOpacity activeOpacity={.5} onPress={(e) => this.formValidation()}>
          <Text style={styles.buttonText}>{Post}</Text>
        </TouchableOpacity>
      </View>
    </View>
</KeyboardAwareScrollView>

.
.
.
.

在导航到其他屏幕之前，只需从

调用dismissKeyboard()方法来dismissKeyboard

import dismissKeyboard from 'dismissKeyboard';

（这个包）