Question

我有一个＆＃34;全屏＆＃34;用于页面的背景图像：

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

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

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

我知道有<KeyboardAvoidingView>可用，但我不确定如何使用它，或者甚至可以处理这种情况。

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

Answer 1

我添加了

android:windowSoftInputMode="adjustPan"

到我的AndroidManifest.xml并且效果很好 - 视图不会缩小，文本输入也会被推高。

Answer 2

我找到了解决我遇到的同样问题的解决方案。正如你所说，你可以使用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',
}

Answer 3

我确实喜欢这种离子发生天然反应，并且有效：

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

Answer 4

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

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

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

Answer 5

更改

android:windowSoftInputMode="adjustResize"

收件人

android:windowSoftInputMode="adjustPan"

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

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

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

6 个答案: