Reactnative React Navigation 标题的渐变 colored颜色

发布于03月04日

我在React Native应用程序中使用React导航，我想将标题的backgroundColor改为gradient，我发现有一个 node 模块:react-native-linear-gradient在React Native中实现gradient.

我有这样的根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中以供使用

我知道我可以创建一个自定义标题组件并使用它，但当我这样做时，React navigation的所有本机导航动画都无法像两条路由之间的标题动画那样工作，所以这对我没有帮助.

谢谢你的帮助！

navigationOptions: { header: props => <GradientHeader {...props} />, headerStyle: { backgroundColor: 'transparent', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }, },

const GradientHeader = props => ( <View style={{ backgroundColor: '#eee' }}> <LinearGradient colors={['red', 'blue']} style={[StyleSheet.absoluteFill, { height: Header.HEIGHT }]} > <Header {...props} /> </LinearGradient> </View> )

Reactnative React Navigation 标题的渐变 colored颜色

推荐答案

React-native相关问答推荐

如何从 onCacheEntryAdded 生命周期回调向 RTK 查询 useQuery() 挂钩抛出错误

嵌套的FlatList内的Incorrect Padding

react native调用fetch后如何使用Async Storage在本地保存数据？

在react-native 应用程序中使用中继

Invariant Violation：requireNativeComponent： "RNCWebView" was not found in the UIManager

iPhone 6s plus 上的字体大小

React-native，iOS模拟器停止响应CMD + D

library not found for -lRCTGeolocation

是否可以在 React Native 中隐藏BugReporting extraData？

React Native：fetch request failed with error - TypeError： Network request failed(…)

如何将 View 定位在 ScrollView 的底部？

require() 必须有一个字符串文字参数 React Native

在Android上更改高度时react-native TextInput显示错误

我可以使用 react native 开发 pwa

如何知道 FlatList 中的滚动状态？

horizontal水平 FlatList 前后的间距

React Native 模块中的依赖注入

键盘可见时无法单击按钮

如何在 React 中将函数与钩子绑定？

React-Native 水平滚动视图分页：预览下一页/卡片