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

时间:2018-09-17 21:52:42

标签: react-native react-navigation expo linear-gradients

我正在使用react-navigation,并且我有一个嵌套有stackNavigator的抽屉导航器,如何使用Expo LinearGradient设置整个应用程序的渐变背景,而不必在其屏幕上用<LinearGradient>包装每个屏幕组件渲染方法?

PS:我尝试将<MyApp />组件与<LinearGradient>组件包装在app.js中,但似乎<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: '....'
    }
  }
})

1 个答案:

答案 0 :(得分:2)

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

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

尝试将导航器简化为几个屏幕,然后介绍嵌套的导航器,然后介绍整个恐怖内容。

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