reactjs – React Navigation – 标题的渐变颜色

发布时间：2020-12-15 20:54:07 所属栏目：百科来源：网络整理

导读：我在React Native应用程序中使用React Navigation,我想将标题的backgroundColor更改为渐变,我发现有一个节点模块：react-native-linear-gradient来实现反应原生的渐变我有这样的Root StackNavigator： const Router = StackNavigator({Login: { screen: Log

我在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>
)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!