反应本机制作背景图像避免键盘

Question

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

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

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

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

我知道有一个可用，但我不知道如何使用它，甚至它是否处理这种情况。

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

Answer 1

我加了

android:windowSoftInputMode="adjustPan"

对我的AndroidManifest.xml来说，它的效果非常好--视图没有缩小，文本输入被推高。

Answer 2

我喜欢这个“反应本地人”，它起作用了：

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

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