React Navigation - 标题的渐变颜色

Posted 2023-03-07

【中文标题】React Navigation - 标题的渐变颜色

【英文标题】：React Navigation - Gradient color for Header

【发布时间】：2017-12-09 00:14:15

【问题描述】：

我在 React Native 应用程序中使用 React Navigation，我想将标题的 backgroundColor 更改为渐变，我发现有一个节点模块：react-native-linear-gradient 来实现 react native 的渐变。

我有这样的 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 的所有本机导航动画都不像两条路线之间的标题动画那样工作，所以它对我没有帮助。

感谢您的帮助！

【参考方案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，此解决方案也能正常工作

【讨论】：

谢谢，使用 react-navigation 2.x 确实更容易

很好很容易

【参考方案2】：

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

【讨论】：

当我实现这个时，我一直有一个问题，红屏说： TypeError : undefined is not a object (evaluation 'this.props.scene.index') 这个错误位于：在 Header (at withOrientation.js 30)... ...... ...... 请帮帮我，我的反应版本是 0,55，这是问题吗？

@G.Adnane 这可能是因为您使用的是最新版本的 React Navigation (v2)。他们在那里的导航器组件发生了很大变化。

知道如何实现它吗？！顺便谢谢你

【参考方案3】：

与此问题类似：React Navigation; use image in header?

对于线性渐变，您只需这样做 >

//imports

import  Image, StyleSheet, View  from 'react-native';
import  Header  from 'react-navigation' ;
import LinearGradient from 'react-native-linear-gradient';

//header

创建包裹在线性渐变中的 Header 组件。 通过制作标题backgroundColor: 'transparent'，您将显示包裹它的线性渐变。

const GradientHeader = props => (
  <View style= backgroundColor: '#eee' >
    <LinearGradient
      colors=['#00a8c3', '#00373f']
      style=[StyleSheet.absoluteFill, styles.linearGradient]
    />
    <Header ...props style= backgroundColor: 'transparent' />
  </View>
);

返回标题为GradientHeader 组件的屏幕。

const SimpleStack = StackNavigator(
  Home: 
    screen: MyHomeScreen,
  ,
, 
  navigationOptions: 
    headerTitleStyle:  color: '#fff' ,
    header: (props) => <GradientHeader ...props />,
  
);

上面的代码应该看起来像这样。

Gradient Header

【讨论】：

只要你给

【参考方案4】：

您可以使用博览会中的LinearGradient 组件。它是一个有用的组件，您不能安装另一个库，如 react-native-linear-gradient。 https://docs.expo.io/versions/latest/sdk/linear-gradient/。顺便说一句，您可以更改后退按钮。这很容易。

您可以使用类似的导航选项在屏幕内实现它

static navigationOptions = ( navigation : any) => 
  const onGoBack = () => navigation.goBack();
  return 
    header: (props: any) => <GradientHeader ...props />,
    headerStyle:  height: 68, backgroundColor: "transparent", color: colors.white ,
    headerTitle: "Sign Up",
    headerTitleStyle:  color: colors.white, fontSize: 18 ,
    headerLeft: (
      <TouchableOpacity style= width: 32, height: 32, paddingLeft: 8  onPress=onGoBack>
        <Image source=images.back resizeMode="center" style= width: 32, height: 32  />
      </TouchableOpacity>
    ),
  ;
;