React Navigation-标题的渐变颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

我在React Native应用程序中使用React

Navigation，我想backgroundColor将标头更改为渐变，我发现这里有一个节点模块：react-native-linear-

gradient在react native中实现渐变。

我有这样的Root ：

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的所有本机导航动画都无法像两条路线之间的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>
)

以上是 React Navigation-标题的渐变颜色 的全部内容， 来源链接： utcz.com/qa/414855.html

回到顶部