我正在使用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: '....'
}
}
})
答案 0 :(得分:2)
这在我的App.js中对我有用:
return (
<LinearGradient colors={myGradientColor} style={{ flex: 1}}>
<MainNavigator />
</LinearGradient>
);
尝试将导航器简化为几个屏幕,然后介绍嵌套的导航器,然后介绍整个恐怖内容。
我不得不在MainNavigator中修改后续屏幕,以排除任何类型的LinearGradient背景,并且还必须在flex: 1
样式内工作。