Question

我正在使用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: '....'
    }
  }
})

Answer 1

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

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

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

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

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

1 个答案: