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

Posted 2023-02-22

【中文标题】React Native - 使背景图像避免使用键盘

【英文标题】：React Native - Making background image avoid keyboard

【发布时间】：2017-07-11 22:00:05

【问题描述】：

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

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


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

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

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

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

【问题讨论】：

为什么width: null, height: null

@PramendraGupta ***.com/a/32428956/283863

从您的示例中看不太清楚，但您是否尝试过 zIndex 而不是将

@PramendraGupta 图片背景只是问题的一部分。我不希望视图缩小，我只希望某些元素被键盘向上推。这可能吗？

***.com/a/33812748/282000

【参考方案1】：

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

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

【参考方案2】：

我加了

android:windowSoftInputMode="adjustPan"

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

【讨论】：

android:windowSoftInputMode="adjustPan" 应该在 developer.android.com/guide/topics/manifest/… 里面我已经在那里有了这个属性，所以我只替换了这个值。

【参考方案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',

【参考方案4】：

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

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

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

【参考方案5】：

改变

android:windowSoftInputMode="adjustResize"

到

android:windowSoftInputMode="adjustPan"

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

【参考方案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',
  ,
);