react-native - 将 Expo LinearGradient 设置为整个 React Native 应用程序的背景

我正在使用 react-navigation 并且我有一个带有 stackNavigator 嵌套在其中的 drawerNavigator，如何使用 Expo LinearGradient 为整个应用程序设置渐变背景，而不必在其渲染方法中使用 <LinearGradient> 包装每个屏幕组件？

P.S:我试图在 app.js 中用 <MyApp /> 组件包装 <LinearGradient> 组件，但似乎 <MyApp /> 组件用自己的背景覆盖了整个屏幕，所以看不到线性渐变。

导航器代码

const HomeStack = createStackNavigator({
  Home: {
    screen: Home
  },
  Results: {
    screen: Results
  },
}, {
  navigationOptions: {
    header: null
  }
})


const MyApp = createDrawerNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      title: '...'
    }
  },
  Info: {
    screen: Info,
    navigationOptions: {
      title: '.....'
    }
  },
}, {
  drawerPosition: '....',
  contentOptions: {
    itemStyle: {
      alignSelf: '....',
    },
    labelStyle: {
      fontFamily: '....'
    }
  }
})

最佳答案

这在我的 App.js 中对我有用:

return (
  <LinearGradient colors={myGradientColor} style={{ flex: 1}}>
    <MainNavigator />
  </LinearGradient>
);

尝试将您的 Navigator 简化为几个屏幕，然后介绍嵌套的 Navigator，然后介绍整个恐怖。

我不得不修改 MainNavigator 中的后续屏幕以排除任何类型的 LinearGradient 背景，并在 flex: 1 样式中工作。

关于react-native - 将 Expo LinearGradient 设置为整个 React Native 应用程序的背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52376171/