React Native - 如何让背景图片避开键盘？

Question

我有一个用于网页的“全屏”背景图片：

```html

我有一个用于网页的“全屏”背景图片：

```

container = {
    flex: 1,
    width: null,
    height: null
}

<View ...>
    ...
    <Image ... styles={container}>
        ...
        <TextInput ... />
        ...
    </Image>
</View>

然而，您可能会注意到，点击文本输入框会打开键盘并改变视图的高度。由于图片被设置为覆盖，因此当视图的尺寸改变时，它也会进行调整。我希望父视图和<Image>的高度不受键盘的影响，只有<Image>的内容应该被键盘推上去。

我知道有一个<KeyboardAvoidingView>可用，但我不确定如何使用它或它是否处理此情况。

任何想法都可以。谢谢。

- Derek 朕會功夫

---

为什么width: null, height: null？ - Pramendra Gupta

@PramendraGupta https://dev59.com/c10b5IYBdhLWcg3wUP4X#32428956 - Derek 朕會功夫

从你的示例中不太清楚，但你尝试过使用zIndex将<Image始终放在后台吗？ - Pramendra Gupta

@PramendraGupta 图像背景只是问题的一部分。我不希望视图缩小，我只想让某些元素被键盘推上去。这可能吗？ - Derek 朕會功夫

https://dev59.com/c10b5IYBdhLWcg3wUP4X#33812748 - Pramendra Gupta

对于那些使用Expo的人，我发现这个链接很有帮助：https://dev59.com/JlkS5IYBdhLWcg3w45-B#62615265 - darkoJ

Answer 1

我在 React Native 中这样做，并且它有效：

backgroundImage: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
},

- Hossein Arsheia

Answer 2

我已添加。

android:windowSoftInputMode="adjustPan"

我对我的AndroidManifest.xml文件进行了修改，这样效果非常好——视图不会被缩小，文本输入框也被顶上去了。

- Derek 朕會功夫

---

android:windowSoftInputMode="adjustPan" 应该放在 <activity> 标签内。详情请参考 https://developer.android.com/guide/topics/manifest/activity-element#wsoft我已经在那里设置了该属性，所以我只是替换了它的值。 - Black

Answer 3

这是我在面对同样问题时发现的解决方案。像你所说的一样，可以使用react-native-keyboard-avoiding-view来很好地避免键盘遮挡，这个解决方案就实现了这一点。

所以在这里我们有一个样式为imageStyle的图像包装了所有内容。

render() {
  return(
   <Image source={{uri: 'blabla'}} style={imageStyle}>
     <View style={styles.container}>
       <KeyboardAwareScrollView>
         <TouchableOpacity onPress={this.abc.bind(this)}>
           <View style={styles.abc}>
             <Text>Test</Text>
           </View>
         </TouchableOpacity>
         ...
       </KeyboardAwareScrollView>
       ...
     </View>
   </Image>
  )
} 

和imageStyle相关：

const imageStyle = {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  resizeMode: 'stretch',
}

附加信息: 如果你需要支持屏幕旋转，你可以这样做：

const { width, height } = Dimensions.get('window')
const imageStyle = {
  width: width < height ? width : height,
  height: width < height ? height : width,
  resizeMode: 'stretch',
}

- eden

Answer 4

改变

android:windowSoftInputMode="adjustResize"

To

android:windowSoftInputMode="adjustPan"

在 android/app/src/main/AndroidManifest.xml 中，阻止 activity。

- ImYuta

Answer 5

我想达到同样的效果，但不更改 windowSoftInputMode。

我只需将图像的高度设置为Dimensions.get('window').height即可实现。

当键盘打开时，我的背景图像保持不变，但是位于其上方的组件会移动。

- Rob

Answer 6

因为我也在使用React Navigation，所以我在有效地使用窗口高度方面遇到了问题。我的通知被卡在底部，而且超出了屏幕范围。最终的解决方案是在子元素之前关闭ImageBackground元素：

<View style={styles.container}>
  <ImageBackground
    source={BACKGROUND}
    imageStyle={{ resizeMode: 'repeat' }}
    style={styles.imageBackground}
  />
  <SafeAreaView style={{ flex: 1, justifyContent: 'space-between' }}>
    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? "padding" : "height"} style={{flex: 1, justifyContent: 'space-between'}}>
      {children}
    </KeyboardAvoidingView>
    <Notification/>
  </SafeAreaView>
</View>

看起来像这样的样式

export const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
export const styles = StyleSheet.create(
{
  notification: { position: 'absolute', bottom: 0, left: 0, right: 0, alignItems: 'stretch'},
  imageBackground: { position: 'absolute', left: 0, top: 0, height: screenHeight, width: screenWidth },
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'space-around',
  },
});

- Enoch