问题描述
我在React Native应用程序中使用React Navigation,我想将标题的 backgroundColor
更改为渐变,然后发现有一个节点模块: react-native-linear-gradient
以在react native中实现渐变.
I am using React Navigation in React Native app and I want to change the backgroundColor
for the header to be gradient and I found out there is a node module : react-native-linear-gradient
to achieve gradient in react native.
我有这样的根 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
包裹成这样的渐变:
I can wrap Text
or View
to be gradient like that :
<LinearGradient colors={['#3076A7', '#19398A']}><Text style={styles.title}>{title}</Text></LinearGradient>,
如何在 navigationOptions
中包装标题背景以使用 LinearGradient
模块?
How can I wrap the header background in the navigationOptions
to usethe the LinearGradient
module?
我知道我可以创建一个自定义标头组件并使用它,但是当我执行此操作时,React Navigation的所有本机导航动画都不像两条路线之间的Title Animation一样起作用,因此它无济于事.
I know that I can create a custom header component and use it but when I am doing it all the native navigation animations from React Navigation not working like the Title Animation between two Routes so its not helping me.
感谢您的帮助!
推荐答案
Mark P的解决方案是正确的,但现在您需要定义headerStyle并在那里进行绝对定位:
The solution of Mark P was right but now you need to define headerStyle and do the absolute positioning there:
navigationOptions: {
header: props => <GradientHeader {...props} />,
headerStyle: {
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
},
和GradientHeader:
and the GradientHeader:
const GradientHeader = props => (
<View style={{ backgroundColor: '#eee' }}>
<LinearGradient
colors={['red', 'blue']}
style={[StyleSheet.absoluteFill, { height: Header.HEIGHT }]}
>
<Header {...props} />
</LinearGradient>
</View>
)
这篇关于React Navigation-标题的渐变颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!