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

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

私はネイティブベースを使用しています。どのようにしてこの問題を解決できますか？

出典

2017-09-20 NewTech Lover

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

これは、ビューの一般的な問題を解決するためのコンポーネントです。仮想キーボードの途中で移動します。キーボードの位置に基づいて、その位置または下部のパッドを自動的に調整することができます。

例How to make your React Native app respond gracefully when the keyboard pops up記事

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

出典

2017-09-20 09:45:58 bennygenel

のコンテナとしてそれを作るこのライブラリreact-native-keyboard-aware-scroll-viewを使用することができ、画像は画面全体のコンテナのようなものです。上記のコードはどこに統合する必要がありますか？私は、アプリケーションが約2分をレンダリングしていない間に、エラーメッセージがない間に、イメージの後に追加しました。 –

@NewTechLover質問に「Image」コンポーネントが表示されません。キーボードで避けたい主なコンポーネントをラップする必要があります。あなたの例では、これは 'Content'コンポーネントでなければなりません。 – bennygenel

それは私のおかげで解決しました。しかし、私はそれを使用すると、素晴らしいこのアンドロイドバージョンは、このソリューションの影響を受けるようになります。どのようにすればいいですか？私は博覧会を使用しているので、プラットフォームごとに別々のフォルダはありません。 –

からあなたは、問題は、私が書いたコードの上に画像内にあるということであるだけで、あなたのコンポーネント

出典

2017-09-20 16:09:31

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

答えて

関連する問題