React Native中背景图片遮挡按钮问题：登录页面布局求助

你的问题出在布局层级和样式设置上，以下是具体修改方案：

核心问题 #

1. 布局层级错误：背景图与登录容器平行排列，容器被挤到图片下方超出屏幕范围，导致按钮无法显示。
2. 容器样式缺失：注释掉了flex、alignItems、justifyContent属性，无法让内容居中且占满屏幕空间。
3. 背景图样式不全：未设置高度和图片适配模式，可能导致图片显示异常或容器布局偏移。

修改后的完整代码 #

JSX结构（无需调整） #

<SafeAreaView style={styles.main}>
     <Image source={require('../../assets/LoginScreen.png')} style={styles.img}/>
     <View style={styles.container}>
          <TextInput
            style={styles.input}
            onChangeText={onChangeText}
            placeholder="Kullanıcı adınızı giriniz"
            value={text}
          />
          <TextInput
            style={styles.input}
            onChangeText={onChangeNumber}
            value={number}
            placeholder="Parolanızı giriniz"
            keyboardType="numeric"
          />
          <TouchableOpacity style={styles.button} onPress={onPress}>
            <Text>Giriş Yap</Text>
          </TouchableOpacity>
     </View>
</SafeAreaView>

样式调整 #

main: {
  flex: 1,
  position: 'relative', // 作为子元素绝对定位的参照容器
},
container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingHorizontal: 20, // 避免输入框贴紧屏幕边缘
  zIndex: 1, // 确保登录内容在背景图上方显示
},
img: {
  position: 'absolute', // 让背景图铺满整个容器底层
  width: '100%',
  height: '100%',
  resizeMode: 'cover', // 保持图片比例，自适应容器大小
},
input: {
  height: 40,
  marginTop: 12,
  borderWidth: 1,
  padding: 10,
  width: '100%', // 输入框适配容器宽度
  backgroundColor: 'rgba(255,255,255,0.8)', // 添加半透明白背景，提升输入可读性
},
button: {
  alignItems: 'center',
  backgroundColor: '#DDDDDD',
  padding: 10,
  marginTop: 20, // 与输入框拉开间距
  width: '100%', // 按钮与输入框宽度保持一致
}

修改说明 #

• 给main容器添加相对定位，让背景图的绝对定位基于它展开。
• 背景图设为绝对定位并铺满整个屏幕，用resizeMode: 'cover'保证图片比例正常且无拉伸变形。
• 恢复登录容器的flex布局属性，让输入框和按钮居中显示，同时通过zIndex确保内容在背景图上方。
• 优化输入框和按钮的宽度与间距，提升页面美观度和可用性。

内容的提问来源于stack exchange，提问作者furkan aydınlı