web-dev-qa-db-ja.com

iOSキーボードは、画面の下部にある入力をカバーします

iOSキーボードは、画面の下部にある入力をカバーします。この問題はどのように解決できますか？

これがコードです。

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

Native-Baseを使用しています。この問題はどのように解決できますか？

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

ドキュメントで React Native Keyboard Avoiding View を確認してください。

これは、仮想キーボードの邪魔にならないように移動する必要があるビューの一般的な問題を解決するためのコンポーネントです。キーボードの位置に基づいて、その位置または下のパディングを自動的に調整できます。

例：Reactキーボードがポップアップしたときにネイティブアプリが正常に応答する方法 記事

 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

このライブラリを使用できます react-native-keyboard-aware-scroll-view コンポーネントのコンテナとして作成するだけです

0
Ahmed Ali