React Native 中显示键盘时如何不移动视图？

Question

我的屏幕中有两个元素。第一个是带有flex的Scrollview，另一个是固定高度的View。当键盘出现时，视图元素会上升。

如何实现元素不涨？

好的，这是代码：

<View style={{flex: 1}}>
    <Scrollview style={{flex: 1}}>
        <TextInput />
    </Scrollview>
    <View style={{height: 24}}>
         Two buttons here...
    </View>
</View>

这是屏幕截图：

只是希望显示键盘时两个页脚按钮不会上升。

Answer 1

您可以尝试以下代码。它可能会解决您的问题

<KeyboardAvoidingView
    behavior={Platform.OS == "ios" ? "padding" : "height"}
    keyboardVerticalOffset={Platform.OS == "ios" ? 0 : 20}
    enabled={Platform.OS === "ios" ? true : false}>

  <Text>Hello</Text>
  <Text>World</Text>

</KeyboardAvoidingView>

Answer 2

有两种方法可以实现这一目标：

KeyboardAvoidingView：https://facebook.github.io/react-native/docs/keyboardavoidingview

<KeyboardAvoidingView
  style={{flex: 1}} 
  behavior={'padding'} 
  keyboardVerticalOffset={65}>
    <FlatList .../>
    <TextInput ... />
</KeyboardAvoidingView>

安卓 ：

android:windowSoftInputMode="adjustPan" 使用AndroidManifest.xml 中的设置调整键盘：

<application
            ...
            >
     <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                ...
                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                android:windowSoftInputMode="adjustPan"
                ...
                android:authorities="${applicationId}">
    </activity>
    </application>