web-dev-qa-db-ja.com

キーボードがレイアウトを押し上げるのを避ける方法Android react-native

私はこの問題に数か月直面していますが、まだ解決できません。ビューの下部にあるテキスト入力は、タップするとソフトキーボードで表示されるはずです。代わりに、レイアウト全体が押し上げられ、上部が見えなくなります。

さまざまなキーボードスペーサーライブラリを試しましたが、それらはすべてTextInputをさらに高くプッシュするだけです。

スクリーンショット： キーボードなしキーボードあり

これが私のメインビューです。

<View
    style={{
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'space-between',
      overflow: 'hidden',
      backgroundColor: Colors.darkBlue
    }}
  >
    {/* Header */}
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'stretch',
        height: 300
      }}>
      {/* Question bubble */}
      { (this.state.question && this.state.question !== '') ? (
          <TouchableOpacity
            style={{
                flex: 1,
                flexDirection: 'row',
                backgroundColor: 'transparent',
                alignItems: 'stretch',
                paddingRight: QUESTION_SPEAKER_RADIUS
              }}
          >
            <View
              style={{
                  flex: 1,
                  alignSelf: 'stretch',
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'white',
                }}
            >
              <Text>
                {this.state.question}
              </Text>
            </View>
          </TouchableOpacity>
        ) : null
      }
    </View>
    <KeyboardInput
      style={{}}
      onClose={() => this.setState({ displayMode: DISPLAY_MODES.homeEmpty })}
      onConfirm={(text) => this.onConfirmText(text) }
    />
  </View>

KeyboardInputは次のとおりです。

<View
      style={{
        alignSelf: 'stretch',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: Colors.pink,
        borderColor: Colors.Lime,
        borderTopWidth: 4,
        padding: 6,
      }}>
      <View
        style={{
          flex: 1,
          borderRadius: 6,
          padding: 0,
          backgroundColor: Colors.white,
          alignItems: 'stretch',
        }}
      >
        <TextInput
          placeholder={Strings.child_keyboard_placeholder}
          value={this.state.messageTextInput}
          onChangeText={(text) => this.setState({messageTextInput: text})}
          style={{
            height: 50,
            marginLeft: 10,
            marginRight: CONFIRM_BUTTON_SIZE / 2
          }}
          underlineColorAndroid='transparent'
          numberOfLines={2}
          maxLength={70}
          autoCorrect={false}
          returnKeyType='next'
        />
      </View>
    </View>

AndroidでRN 0.35を使用します。

androidreact-nativekeyboard
12
Alex Pavtoulov

ここでの問題は、AndroidManifest.xmlにあることです。

windowSoftInputMode="adjustResize";

次のように変更します。

windowSoftInputMode="adjustPan"

注：この変更の後、./gradlew clean in Androidフォルダーとプロジェクトディレクトリ内のreact-native run-Androidを実行する必要があります。

28
Luís Mestre

パッティング

Android:windowSoftInputMode="adjustNothing"

マニフェストで私のために働いた。

3
Arsam

GitHubまたはスタックオーバーフローで見つけることができるすべてのソリューションを試しました。 AndroidManifest.xmlに次のコード行を追加すると役立ちます。

私はこれを試しました

windowSoftInputMode="adjustPan"

時々それは動作しますが、誤動作します。

そして、私はこれに出くわしました

windowSoftInputMode="adjustResize"

また、これは誤って動作し、最終的に両方をこのように組み合わせて、箱から出して正常に動作します。

Android:windowSoftInputMode="adjustPan|adjustResize"

そして、react-native KeyboardAvoidingViewコンポーネントを使用できます。

<KeyboardAvoidingView
    style={{ flex: 1}}
    behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 40 : 0}
  >

これがお役に立てば幸いです。

1
Pratap Sharma

私のために働いた唯一の解決策は次のとおりです。

keyboardVerticalOffsetを定義し、すべてをScrollViewputkeyboardVerticalOffset = {-500}

<KeyboardAvoidingView style = {styles.container} 
behavior="position" keyboardVerticalOffset={-550}>  

ScrollView
    TextInput

XMLのAndroid windowsoftをコンテナの高さに変更することから多くの解決策を試みました。そして、この解決策を Github で見つけました。

0
Zuha Karim

セッティング

Android：windowSoftInputMode = "adjustPan"

androidManifest.xmlのMainActivityで私のために働いた！

しかしながら Android:windowSoftInputMode="adjustNothing"推奨されませんキーボードに反応するデザインを作成する自由が完全に必要になるためです。

0
ishab acharya

この分野に挑戦する人のための致命的なチュートリアルを次に示します。

このプロジェクトについては、すぐにHOCソリューションを非常に詳しく見ていきますが、今のところは、この問題を解決する必要があります。これは_windowSoftInputMode="adjustPan"_が私にしたことです。

それにより、キーボードが表示されるだけですover top。デフォルトのサイズ変更オプションでは、すべてのコンポーネントが_flex: 1_とjustify/align centerを使用していたため、ビューはあらゆる種類のマングルになりました。私のビューには入力が1つしかなく、8つのビュー、8つのステッププロセスの一部であると考えると、キーボードがadjustPanで入力を超えないので、これはあまりにも多くの作業です。

しかし、私の意見では、最適なソリューションは、_<KeyboardAvoidingView />_をイベントリスナーの追加と削除、およびコンポーネントstylesの一部の状態切り替えとの組み合わせで使用することです。これは、両方のキーボード状態を通じてAndroidとiOSの両方でUIを完全に制御する唯一の方法です。

0
agm1984

まあ、React Native FBグループのおかげで、解決策が得られました。これが機能するためには、ステータスバーを「非表示」にする必要はありません。本当に奇妙なバグです。

0
Alex Pavtoulov