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

【问题标题】：How do not move view when keyboard shows in React Native?React Native 中显示键盘时如何不移动视图？
【发布时间】：2020-03-15 20:10:38
【问题描述】：

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

如何实现元素不上去？

好的，代码如下：

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

截图如下：

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

【问题讨论】：

你在使用keyboardavoidingview吗>
在AndroidManifest.xml中使用adjustResize
好的，但我正在使用 expo。

标签： react-native flexbox scrollview

【解决方案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>

【讨论】：

{Platform.OS === "ios" ? true : false} 可以替换为{Platform.OS === "ios"}

【解决方案2】：

有两种方法可以实现：

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

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

安卓：

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

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

【讨论】：

android:windowSoftInputMode="adjustPan" 将使主活动视图 PAN 移动（即被翻译）到屏幕之外！如果您希望您的组件调整大小，请使用“adjustResize”（例如，使用 style={{flex:1}} 放置一个，它将在键盘可见时调整大小）。