React Navigation - Header 的渐变色

Question

我在 React Native 应用程序中使用 React Navigation，我想将 header 的 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>,

如何将 header 背景包裹在 navigationOptions 中以供使用 LinearGradient 模块？

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

感谢您的帮助！

Answer 1

与此问题类似：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 组件。通过制作 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>
);

Return 屏幕 header 是您的 GradientHeader 组件。

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

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

Gradient Header

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

Answer 3

仅供参考，现在有了 headerBackground 道具，事情变得更容易了。

你可以有一个渐变 header 只是这样做:

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

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

Answer 4

您可以使用 expo 中的 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>
    ),
  };
};

React Navigation - Header 的渐变色

React Navigation - Gradient color for Header

javascript

reactjs

react-native

react-navigation

node-modules