react-native-keyboard-aware-scroll-viewが正常に動作しない

Question

キーボードが入力をカバーしないようにreact-native-keyboard-aware-scroll-viewを使用しようとしています。

何らかの理由で、何らかの理由で常にキーボードがアクティブになっていると思います。なぜなら、常にすべてを圧縮するからです。

添付されているのは、コードだけでなく、起こっていることの写真です。誰でも何が起こっているのか分かりません。私はそれをしばらく遊んでいて、運がなかった。私は反応ネイティブv 0.33と反応ネイティブキーボード認識スクロールビューv 0.2.1を実行しています。

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; 


class LoginIOS extends Component{ 

    constructor(props) { 
    super(props); 
    this.login = this.login.bind(this); 
    this.renderScene = this.renderScene.bind(this); 
    this.state={ 
     username: '', 
     password: '' 
    }; 
    } 

    render() { 
    return (
     <Navigator 
      renderScene={this.renderScene} 
      navigator={this.props.navigator} 
      navigationBar={ 
      <Navigator.NavigationBar style={{backgroundColor: 'transparent'}} 
       routeMapper={NavigationBarRouteMapper} /> 
      } /> 
    ); 
    } 

    renderScene() { 
    return (
    <KeyboardAwareScrollView> 
     <View style={styles.container}> 
     <Spinner visible={this.state.visible} /> 
     <StatusBar barStyle="light-content" hidden={true}/> 
     <View style={styles.topContainer}> 
      <View style={styles.bannerContainer}> 
      <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}> 
       <Image style={styles.mark} source={require('***')} /> 
      </View> 
      </View> 
      <View style={styles.credentialContainer}> 
       <View style={styles.inputContainer}> 
        <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" /> 
         <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}> 
         <TextInput 
          style={styles.input} 
          placeholder="Username" 
          autoCorrect={false} 
          autoCapitalize="none" 
          returnKeyType="next" 
          placeholderTextColor="#e0e0e0" 
          onChangeText={(text) => this.setState({username: text})} 
          value={this.state.username} 

          > 

         </TextInput> 
         </View> 
       </View> 

       <View style={styles.inputContainer}> 
        <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" /> 
         <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}> 
         <TextInput 
          style={styles.input} 
          placeholder="Password" 
          returnKeyType="done" 
          autoCorrect={false} 
          secureTextEntry={true} 
          placeholderTextColor="#e0e0e0" 
          onChangeText={(text) => this.setState({password: text})} 
          value={this.state.password} 
          onSubmitEditing={(event)=> { 
           this.login(); 
          }} 
          > 
         </TextInput> 
         </View> 
       </View> 
       <TouchableOpacity style={styles.forgotContainer}> 
       </TouchableOpacity> 
      </View> 

     </View> 

     <TouchableHighlight 
      underlayColor="#D6AB00" 
      onPress={this.login} 
      style={styles.signInButtonContainer}> 
      <Text style={styles.signInText}>Sign In</Text> 
     </TouchableHighlight> 

     </View> 
    </KeyboardAwareScrollView> 

    ); 
    } 

Answer 1

私は別のlibを使用することによって、この問題を解決しました。反応ネイティブキーボード認識スクロールビューが機能しない理由はわかりませんが、反応ネイティブキーボード認識ビューを実装すると問題はありません。

https://www.npmjs.com/package/react-native-keyboard-aware-view

Answer 2

また絶対ビューまたは固定部品を持つことはできませんスクロールビューとしてアニメーションビューを使用することができます。キーボードのイベントを聞いて調整するのはうまくいくでしょう。

onKeyboarDidShow(e) { 
    //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) 
    Animated.timing(this.relativeBottom, { 
    duration: e.duration, 
    toValue: Dimensions.get('window').height-em(64)-e.endCoordinates.height 
    }).start() 
} 

onKeyboardWillHide(e) { 
    //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) 
    Animated.timing(this.relativeBottom, { 
    duration: e.duration, 
    toValue: Dimensions.get('window').height-em(64) 
    }).start() 
} 

componentWillMount() { 
    this._didShowListener = Keyboard.addListener('keyboardWillShow', this.onKeyboarDidShow.bind(this)); 
    this._willHideListener = Keyboard.addListener('keyboardWillHide', this.onKeyboardWillHide.bind(this)); 
} 

componentWillUnmount() { 
    this._didShowListener.remove(); 
    this._willHideListener.remove(); 
} 

Answer 3

は個人的に

<KeyboardAwareScrollView contentContainerStyle={{flex: 1}}> 
    <View style={{flex: 1}}>