web-dev-qa-db-fra.com

le clavier ios couvre l'entrée qui se trouve en bas de l'écran

le clavier ios couvre l'entrée qui se trouve en bas de l'écran. Comment résoudre ce problème?

voici le code.

 <Content style={styles.content}>

            <Form>
              <Item style={{borderBottomColor:'#42e8f4'}}>
                <Icon active name='mail' style={{color: '#42e8f4'}} />
                <Input placeholder='Email'placeholderTextColor= '#42e8f4' style={{color:'#0dc49d'}}/>
              </Item>
              <Item style={{ borderBottomColor:'#42e8f4'}}>
                <Icon active name='lock' style={{color: '#42e8f4'}} />
                <Input secureTextEntry={true} placeholder='Password'placeholderTextColor= '#42e8f4' style={{color:'#42e8f4'}}/>
              </Item>
            </Form>
            <ListItem style={{borderBottomWidth:0,borderTopWidth:0,borderBottomColor:'#42e8f4'}}>
              <Button transparent onPress={() => this.props.navigation.navigate("Signup")}>
                <Text style={{color:'#42e8f4'}}>Create Account</Text>
              </Button>
            <Button transparent onPress={() => this.props.navigation.navigate("Forgetpass")}>
              <Text  style={{color:'#42e8f4'}}>Forget Password</Text>
            </Button>
            </ListItem>
            <Button full
              style={{backgroundColor:'#42e8f4'}}
              onPress={() => this.props.navigation.navigate("Welcome")}>
              <Text style={{color: '#FFF'}}>Sign In</Text>
            </Button>
          </Content>

const styles = {
  content:{
    position:'absolute',
    bottom:10,
    left:0,
    right:0
  },
}

J'utilise Native-Base. Comment résoudre ce problème?

react-nativereact-native-androidreact-native-iosnative-base
11
NewTech Lover

Consultez la documentation pour React Native Keyboard Avoiding View .

C'est un composant pour résoudre le problème commun des vues qui doivent s'écarter du chemin du clavier virtuel. Il peut ajuster automatiquement sa position ou le rembourrage inférieur en fonction de la position du clavier.

Exemple tiré de Comment faire pour que votre application React Native réagisse gracieusement lorsque le clavier apparaît article

 return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <Image source={logo} style={styles.logo} />
      <TextInput
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        placeholder="Username"
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        style={styles.input}
      />
      <TextInput
        placeholder="Confirm Password"
        style={styles.input}
      />
      <View style={{ height: 60 }} />
    </KeyboardAvoidingView>
  );
3
bennygenel

Vous pouvez utiliser cette bibliothèque react-native-keyboard-aware-scroll-view il suffit de le faire comme un conteneur pour vos composants

0
Ahmed Ali