React Native Navigation可正常导航但安卓iOS不渲染元素仅web运行正常

问题原因 #

你遇到的差异来自createNativeStackNavigator的原生端和web端默认行为不一致：

• web端的导航栈实现默认无原生导航头、屏幕背景透明，所以可以正常透出外层渐变、显示Login组件内容
• iOS/Android端的原生导航栈默认自带不透明的白色背景，且默认显示原生导航头，要么遮挡了你的Login组件内容，要么背景色覆盖了内容/外层渐变。
  另外如果你的styles.container、styles.linearGradient未设置flex: 1，也会导致导航容器在原生端无法获取正确高度，内容被挤压不可见。

解决步骤 #

1. 确认全局样式配置，给外层渐变和容器加上flex: 1保证占满全屏：

const styles = StyleSheet.create({
  linearGradient: {
    flex: 1,
    width: '100%',
  },
  container: {
    flex: 1,
    backgroundColor: 'transparent',
  }
})

2. 给原生栈添加全局配置，关闭默认原生头、设置屏幕背景为透明：
   修改你的Stack.Navigator配置代码：

<Stack.Navigator
  initialRouteName="Login"
  // 新增全局屏幕配置
  screenOptions={{
    // 关闭默认原生导航头
    headerShown: false,
    // 屏幕背景设为透明，透出外层渐变
    contentStyle: {
      backgroundColor: 'transparent'
    }
  }}
>

修改完成后重启Expo服务并清除缓存重新运行即可。

内容的提问来源于stack exchange，提问作者saman93