在React Native中打开键盘时如何避免屏幕崩溃 [英] How to avoid collapsing of screen when keyboard opens in react native

问题描述

在我的应用中，登录页面为登录屏幕.我已经使用native-base ui工具包完成了它.登录屏幕包含一个logo，下面将有两个输入字段，分别是用户名和密码以及登录按钮.问题是，每当我单击输入字段时，login form都会在徽标下折叠.我将为此共享相应的屏幕.我尝试了以下方法

In my app the landing page is login screen. I've done it using native-base ui kit.The login screen contains a logo and below there will be 2 input fields for username and password also login button. The problem is that whenever i clicked on the input field the login form get collapse under the logo. I will share the corresponding screens for it. I've tried the following method

android:windowSoftInputMode="adjustResize".但是仍然得到相同的屏幕.请看一下屏幕.

android:windowSoftInputMode="adjustResize" within activity tag in AndroidManifest.xml. But still getting the same screen. Please have a look at the screens.

1. 正常的屏幕行为 https://i.stack.imgur.com/ZFqfI.png
2. 打开键盘后 https://i.stack.imgur.com/tZr1i.png

1. Normal screen behavior https://i.stack.imgur.com/ZFqfI.png
2. After keyboard opens https://i.stack.imgur.com/tZr1i.png

我也尝试过KeyboardAvoidngView.下面是代码

I've also tried KeyboardAvoidngView .Following is the code

render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={{flex:1}}>
      <Container>
        <StatusBar barStyle="light-content" />

          <View style={styles.logoContainer}>
            <ImageBackground source={launchscreenLogo} style={styles.logo} />
          </View>
          <View
            style={{
              flex:1,
              marginBottom: 200,
              backgroundColor: "transparent"
            }}
          >
            <Form style={{margin:10}}>
          <Item  style={{margin:10}}>
           <Icon active name='person' />
           <Input
             placeholder='Username'
             style={{marginLeft:18, color:'#000'}}
             value={this.state.username}
             onChangeText={username => this.setState({ username })}
             />
         </Item>
         <Item style={{margin:10}} >
          <Icon active name='mail' />
          <Input
          placeholder='Email'
          style={{marginLeft:18, color:'#000'}}
          value={this.state.email}
          onChangeText={email => this.setState({email})}/>

        </Item>
        <Item  style={{margin:10}}>
         <Icon active name='ios-lock' />
         <Input
         placeholder='Password' style={{marginLeft:18, color:'#000'}}
         value={this.state.password}
         onChangeText={password => this.setState({ password })}
         />

       </Item>
       <Item  style={{margin:10}}>
        <Icon active name='ios-lock' />
        <Input
        placeholder='Repeat Password'
        style={{marginLeft:18, color:'#000'}}
        value={this.state.r_password}
        onChangeText={r_password => this.setState({ r_password })}/>

      </Item>
        </Form>

        <Button
          style={{ backgroundColor: "#809fff", alignSelf: "center", elevation:20}}
          onPress={() => this.props.navigation.navigate("Anatomy")}
        >
          <Text style={{fontWeight:'bold',fontSize:18}}>REGISTER</Text>
        </Button>
        </View>


          <View style={{ marginBottom: 80 }}>

          </View>

      </Container>
      </KeyboardAvoidingView>

    );
  }

推荐答案

您可以使用KeyboardAwareScrollView.

要添加，请使用npm i react-native-keyboard-aware-scroll-view --save

然后使用

<KeyboardAwareScrollView 
        keyboardShouldPersistTaps= 'always'
        style= {{ flex:1 }}  
        >
 <View>
  <TextInput />
 </View>
</KeyboardAwareScrollView>

有关更多信息，请参考此.希望这会有所帮助

For more info refer this. Hope this helps

这篇关于在React Native中打开键盘时如何避免屏幕崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！