2017-10-05 6 views
1

私は私のアプリで反応-ナビゲーションを使用していますが、アプリが複数の画面でStackNavigatorで構成されて、いくつかの画面がautoFocus={true}React-Nativeでキーボードの高さを取得するには?

問題でのTextInputを持っている:コンポーネントのレンダリングこれらの画面上の、画面の高さ

constructor(props) { 
    super(props); 
    this.state = { 
     height: Dimensions.get('window').height, 
    }; 
} 

しかし、TextInputコントロールのautoFocusはコンポを引き起こし、レンダリング後ほぼ瞬時に、画面上でこのスクリーンポップアップキーボードtrueているので:コンストラクタで設定されていますNENTは再レンダリングによるcomponentWillMountにキーボードに追加されたEventListenerにします

componentWillMount() { 
    this.keyboardWillShowListener = Keyboard.addListener(
         'keyboardWillShow', this.keyboardWillShow.bind(this)); 
} 

keyboardWillShow(e) { 
    this.setState({ height: Dimensions.get('window').height * 0.9 - e.endCoordinates.height }); 
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); 
} 

これは、パフォーマンスに影響を与え、私は不要レンダリング再を避けるためにしたいと思います。

質問:
1.それが反応-ナビゲーションのScreenPropsでキーボードの動的な高さ(デバイスに依存する)を設定することは可能ですか?
2. React-Navigationのstate.paramsでも同じことができますか?
3. KeyboardAvoidingViewまたはthis moduleを適用する以外に、この問題を解決する他の方法はありますか?

答えて

5

これは私がやったことです:

アプリはその後、 "認可/ログイン/サインアップ画面" を持っている場合:

hereが説明したようにcomponentWillMountで

  1. はKeyboardListenersを追加

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); 
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); 
    
  2. 電子メール/電話番号/ページの他の「最初の」TextInputにautoFocusを追加すると、画面がロードされると、キーボードp ops-up。 _keyboardDidShow機能で

  3. 、それはKeyboardListenerとして使用され、以下のん:

    _keyboardDidShow(e) { 
        this.props.navigation.setParams({ 
         keyboardHeight: e.endCoordinates.height, 
         normalHeight: Dimensions.get('window').height, 
         shortHeight: Dimensions.get('window').height - e.endCoordinates.height, 
        }); 
    } 
    

    寸法が反応-ネイティブのAPIである、あなたはどんな反応させ、ネイティブのインポートと同じように、それをインポートすることを忘れないでください成分。

    this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params }); 
    
:次のページにリダイレクトしながら、これらのparamsを渡すと、このデータを失わないために他の画面に渡すに維持することを忘れないでください。その後

  • 関連する問題