web-dev-qa-db-ja.com

React-Nativeでキーボードの高さを取得する方法は？

私は自分のアプリでReact-Navigationを使用しています。アプリは複数の画面を持つStackNavigatorで構成されており、一部の画面にはautoFocus={true}のTextInputがあります

Problem：これらの画面では、コンポーネントがレンダリングされるときに、画面の高さがコンストラクターで設定されます。

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

しかし、TextInputのautoFocusはtrueであるため、この画面のキーボードはほとんど瞬時に画面にポップアップ表示されますレンダリング後により、コンポーネントが再レンダリングされます。 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。 React-NavigationのScreenPropsでキーボードの動的な高さを設定することは可能ですか？
2。 React-Navigationのstate.paramsで同じことを行うことは可能ですか？
3。 KeyboardAvoidingViewまたは this module を適用する以外に、この問題を解決する他の方法はありますか？

javascriptreact-nativekeyboardreact-navigation
28
Eduard

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

アプリに「認証/ログイン/サインアップ画面」がある場合：

  1. ComponentWillMountで、説明に従ってKeyboardListenersを追加します here ：

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);

  2. autoFocus をページの電子メール/電話番号/その他の「最初の」TextInputに追加して、画面が読み込まれるとキーボードがポップアップするようにします。

  3. KeyboardListenerとして使用される_keyboardDidShow関数で、以下を実行します。

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

    DimensionsはReact-NativeのAPIです。React-Nativeコンポーネントをインポートするのと同じようにインポートすることを忘れないでください。

  4. その後、次のページにリダイレクトしながら、これらのパラメータを渡し、このデータを失わないように、他の画面にそれらを渡し続けることを忘れないでください：

    this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });
52
Eduard