Question

我使用react-native。在我的情况下，当我的文本输入被聚焦键盘弹出时，它隐藏了我在哪个按钮存在的视图。

我的代码段：

 <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>

我不想隐藏我的按钮＆＃34; Post＆＃34;键盘出现时。当键盘出现时，如何在单击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（）方法来解除关键代码

import dismissKeyboard from 'dismissKeyboard';

（此包）

在本地反应

2 个答案: