javascript - React Navigation - 标题的渐变颜色

Question

我在React Native应用程序中使用React Navigation，我想将标题的backgroundColor更改为渐变，我发现有一个节点模块:react-native-linear -gradient 在 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 包装为这样的渐变:

<LinearGradient colors={['#3076A7', '#19398A']}><Text style={styles.title}>{title}</Text></LinearGradient>,

如何将标题背景包装在 navigationOptions 中以供使用LinearGradient 模块？

我知道我可以创建一个自定义 header 组件并使用它，但是当我这样做时，React Navigation 中的所有 native 导航动画都不像两个路由之间的标题动画那样工作，因此它对我没有帮助。

感谢您的帮助!

Answer 1

仅供引用，现在使用 headerBackground 属性，这会更容易。

您可以使用渐变标题来执行此操作:

navigationOptions: {
  headerBackground: (
    <LinearGradient
      colors={['#a13388', '#10356c']}
      style={{ flex: 1 }}
      start={{x: 0, y: 0}}
      end={{x: 1, y: 0}}
    />
  ),
  headerTitleStyle: { color: '#fff' },
}

即使与 IosX 的 SafeArea 一起使用，该解决方案也能正常工作