ReactNative - FlexBoxのUIがキーボードで開いていない

Question

FlexBoxを使用してネイティブUIを反応させようとしています。しかし、キーボードがポップアップすると、UIが壊れてしまいます。スクリーンショットとコードを見てください。 FlexBoxのコードで何か問題があると思います。 与えられたフレックス値に従って要素間の残りのスクリーンスペースを分割しようとしています。

  <View style={loginWrapperStyle}> 
       <Card> 
        <View style={logoWrapperStyle}> 
         <Image 
          source={require('./logo.png')} 
          style={logoStyle} /> 
        </View> 
        <View style={loginFormStyle}> 
         <TextBox 
          placeholder='Useraname/Email' 
          autoCorrect={false} 
          value={this.state.username} 
          onChangeText={(val) => this.setState({ username: val })} /> 

         <TextBox 
          placeholder='Password' 
          secureTextEntry 
          autoCorrect={false} 
          value={this.state.password} 
          onChangeText={(val) => this.setState({ password: val })} /> 
        </View> 

        <View style={loginButtonWrapperStyle}> 
         <Button> 
          Login 
         </Button> 
        </View> 
       </Card> 
      </View> 

const styles = { 
    loginWrapperStyle: { 
     padding: 15, 
     backgroundColor: '#7CB142', 
     flex: 1, 
    }, 
    logoWrapperStyle: { 
     flex: 2 
    }, 
    logoStyle: { 
     flex: 1, 
     width: null, 
     height: null, 
     resizeMode: 'contain', 
     marginTop: 10 
    }, 
    loginFormStyle: { 
     flex: 1 
    }, 
    loginButtonWrapperStyle: { 
     flex: 1, 
     padding: 15, 
     justifyContent: 'center', 
     alignItems: 'center', 
    } 
}; 

Answer 1

をインストールする最も簡単な解決策と最も簡単ですKeyboardAvoidingViewを試してみることができます。 KeyboardAvoidView内にコードをラップして、それにビヘイビアの小道具を追加する必要があります。

問題を解決するKeyboardAwareScrollView（https://github.com/APSL/react-native-keyboard-aware-scroll-view）もあります。

これらのデモは、https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

です。