我在React Native应用程序中使用React Navigation,我想将标题的backgroundColor更改为渐变,我发现有一个节点模块：react-native-linear-gradient来实现反应原生的渐变
我有这样的Root StackNavigator：
const Router = StackNavigator({
Login: {
screen: Login,navigationOptions: ({navigation}) => ({
headerTitle: <Text>SomeTitle</Text>
headerLeft: <SearchAndAgent />,headerRight: <TouchableOpacity
onPress={() => { null }
</TouchableOpacity>,headerStyle: { backgroundColor: '#005D97' },}),},});
我可以将Text或View包装为渐变：
<LinearGradient colors={['#3076A7','#19398A']}><Text style={styles.title}>{title}</Text></LinearGradient>,
如何在navigationOptions中包装标题背景以供使用
LinearGradient模块？
我知道我可以创建一个自定义标题组件并使用它,但是当我这样做时,React Navigation的所有原生导航动画都不像两个Routes之间的Title Animation那样工作,所以它没有帮助我.
谢谢你的帮助！
Mark P的解决方案是正确的,但现在你需要定义headerStyle并在那里进行绝对定位：
navigationOptions: {
header: props => <GradientHeader {...props} />,headerStyle: {
backgroundColor: 'transparent',position: 'absolute',top: 0,left: 0,right: 0,bottom: 0,
和GradientHeader：
const GradientHeader = props => (
<View style={{ backgroundColor: '#eee' }}>
<LinearGradient
colors={['red','blue']}
style={[StyleSheet.absoluteFill,{ height: Header.HEIGHT }]}
>
<Header {...props} />
</LinearGradient>
</View>
)
