React Native - 使背景图像避免使用键盘

Question

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

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

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

但是，您可能会注意到，点击文本输入会打开键盘并且视图的高度会发生变化。由于图像设置为覆盖，因此它也会随着视图尺寸的变化而调整。我希望父视图和<Image> 的高度不受键盘影响，只有<Image> 的内容应该被键盘向上推。

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

任何想法都会很棒。谢谢。

Answer 1

我喜欢在 React Native 中这样做，并且它可以工作：

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

Answer 2

我加了

android:windowSoftInputMode="adjustPan"

发给我的AndroidManifest.xml，结果完美 - 视图没有缩小，文本输入被推高。

Answer 3

这是我发现的解决我遇到的相同问题的解决方案。正如您所说，您可以使用react-native-keyboard-avoiding-view，这是一种避免使用键盘的非常好的方法，而此解决方案实现了这一点。

所以我们这里有一个样式为 imageStyle 的图像，包裹了 everything。

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',
}

Answer 4

我想完成同样的事情，但不更改 windowSoftInputMode。

我可以通过将图像的高度设置为Dimensions.get('window').height来做到这一点。

当键盘打开时，我的背景图像保持不变，但位于其顶部的组件移开。

Answer 5

改变

android:windowSoftInputMode="adjustResize"

到

android:windowSoftInputMode="adjustPan"

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

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',
  },
});