如何在React Native中设置全屏背景图并在前景放置TextButton组件

核心问题原因 #

1. 你给ImageBackground设置了justifyContent: center和alignItems: center，导致内部嵌套的导航容器没有撑满全屏，仅适配内容宽度，所以按钮只能在小范围显示，看起来像是被背景图覆盖
2. HomeScreen中的SafeAreaView没有设置透明背景，默认白色会直接盖住下层的背景图
3. TextButton组件的样式传值错误，没有指定到具体的optionButton样式属性，导致按钮样式失效
4. 按钮容器options没有设置flex:1，无法撑满父容器高度，按钮会出现排布异常

修改步骤 #

1. 调整App.js中ImageBackground的样式 #

移除多余的居中属性，让背景图和内部导航容器都撑满全屏：

const App = () => {
  return (
    <ImageBackground
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
      }}
      source={require('./bg-img.png')}
      resizeMode="cover"
    >
      {/* 原有导航容器、栈屏幕代码保持不变 */}
    </ImageBackground>
  );
};

2. 调整HomeScreen中的容器样式和按钮传值 #

给SafeAreaView添加透明背景，修正TextButton的样式传参，给按钮容器加flex:1撑满高度：

export const HomeScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }}>
      <View style={styles.options}>
        <TextButton style={styles.optionButton} text={menu.schedule} dir={menu.schedule} navigation={navigation} />
        <TextButton style={styles.optionButton} text={menu.news} dir={menu.news} navigation={navigation} />
        <TextButton style={styles.optionButton} text={menu.stats} dir={menu.stats} navigation={navigation} />
        <TextButton style={styles.optionButton} text={menu.loginRegister} dir={menu.loginRegister} navigation={navigation} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  options: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  optionButton: {
    fontSize: 35,
    padding: 40,
  },
});

内容的提问来源于stack exchange，提问作者Patrycja Trzcińska