React Navigation-标题的渐变颜色 [英] React Navigation - Gradient color for Header

问题描述

我在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 use the 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-标题的渐变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！