web-dev-qa-db-ja.com

KeyboardAvoidingViewが正しく機能しない

KeyboardAvoidingViewが正しく機能しない

behavior="padding"でKeyboardAvoidingViewを使用しようとしています。

何らかの理由で、TextInputにテキストを入力しようとすると、TextInputの下にスペースがあります。添付されているのは、コードと同様に何が起こっているかの写真です。ここで何が起こっているのか、誰かが知っている可能性はありますか？

Whats-App-Image-2018-01-24-at-5-07-46-PM

  render() {
    return (

      <KeyboardAvoidingView  style={{ flex: 1}}  behavior="padding">
      < View
          style={{
            flex: 1,

          backgroundColor: "#FFFFFF",

        }}
      >

        <ScrollView
          contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
                <ChatInfo />
              </ScrollView>


          <View style={styles.container}>
          <TextInput
            style={styles.input}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            onChangeText={text => this.setState({ text: text })}
            value={this.state.text}
          />

          <TouchableOpacity
            style={styles.submitButton}
            onPress={this.submitName}
          >
            <Text style={styles.submitButtonText}> SEND </Text>
          </TouchableOpacity>
        </View>

      </ View>
      </KeyboardAvoidingView>
    );
  }
}

export default connect()(ChatScreen);

const styles = StyleSheet.create({
  input: {
    margin: 2,
    paddingLeft: 15,
    flex: 1,
    height: 40,
    padding: 10,
    fontSize: 14,
    fontWeight: "400"
  },

      container: {
        borderTopWidth: 1,
        minWidth: "100%",
        borderColor: "#cccccc",
        height: 44,
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "#fff"

      },

  submitButtonText: {
    color: "#0a9ffc",
    fontSize: 14,
    fontWeight: "500"
  },

  submitButton: {
    backgroundColor: "#fff",
    padding: 10,
    margin: 2,
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  }
});
react-native-android
32
Charan Teja

反応ナビゲーションを使用している場合、これは反応ナビゲーションのヘッダーの影響を受けます。ヘッダーの高さは、モバイル画面によって異なります。そのため、ヘッダーの高さを取得してkeyboardVerticalOffsetプロパティに渡す必要があります。

import { Header } from 'react-navigation';

<KeyboardAvoidingView
  keyboardVerticalOffset = {Header.HEIGHT + 20} // adjust the value here if you need more padding
  style = {{ flex: 1 }}
  behavior = "padding" >

  <ScrollView>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
  </ScrollView> 

</KeyboardAvoidingView>
77
Toh Ban Soon

これは、KeyboardAvoidingViewおよびAndroidの既知の問題です。この問題に対処する方法は複数あります。

React Nativeのドキュメントによると：

振る舞いの小道具をまったく与えない場合、Androidはより良い動作をしますが、iOSは反対です。

そのため、Androidのみで作業している場合は、動作の小道具を削除することができ、すぐに動作するはずです。最良の結果を得るには、Android:windowSoftInputMode="adjustResize"をマニフェストに追加してください。

または、次のように機能するオフセット値を指定できます：KeyboardAvoidingView keyboardVerticalOffset={-500} behavior="padding"

IOSの場合、条件付きで同じことを行います。

behavior= {(Platform.OS === 'ios')? "padding" : null}

keyboardVerticalOffset={Platform.select({ios: 0, Android: 500})}

19
Pavan Mallela

警告

これは部分的な解決策のように見えますが、Android電話がレイアウトを避けてキーボードで画面上でロックされている場合、最初に動作します。

tl; dr

Android:windowSoftInputMode="adjustResize"からAndroidManifest.xmlを削除します

前

...
<activity
  Android:name=".MainActivity"
  Android:label="@string/app_name"  
  Android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  Android:windowSoftInputMode="adjustResize"
  >
...

後

...
<activity
  Android:name=".MainActivity"
  Android:label="@string/app_name"  
  Android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  >
...

なぜ

問題を正しく理解していれば、同じことを扱っています。マニフェストにAndroid:windowSoftInputMode="adjustResize"を含めることにより、AndroidシステムはKeyboardAvoidingViewと同じジョブを実行しようとします。これにより、Androidのみでキーボードの上に余分なスペースが追加されます。

両方のプラットフォームで作業する場合は、キーボード入力で作業するたびにiOSでこれに対処する必要があるため、Android:windowSoftInputMode="adjustResize"によるAndroid固有の動作をマニフェストから削除し、毎回KeyboardAvoidingView。

7
Bulwinkel

KeyboardAvoidingViewはScrollViewの子である必要があり、逆ではありません。このように、それは正常に動作します（私がそれを使用している目的のために正常です）。それを試して、それがどうなったか教えてください。

<ScrollView>
    <KeyboardAvoidingView styles={styles.container} behavior='padding'>

    </KeyboardAvoidingView>
</ScrollView>
4
Andy95

これは behavior props value であるためだと思うので、この行をkeyboardavoidviewに追加すると役立つと思います

<KeyboardAvoidingView
    style = {{ flex: 1 }}
    behavior={Platform.OS === "ios" ? "padding" : null}>
</KeyboardAvoidingView>
3
Mohamed Souibgui
<KeyboardAvoidingView styles={styles.container} behavior = 'padding'  enabled>
   <ScrollView>

        <View>
          ....
        </View>

   </ScrollView>
</KeyboardAvoidingView>
2
YassR