反应导航 - Headers 的渐变颜色-Java 学习之路

我在React Native应用程序中使用React Navigation，我想将 Headers 的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中包装 Headers 背景以使用LinearGradient模块？

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

谢谢你的帮助！

3 回答

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

回复于 2024-04-29T03:55:10+08:00

仅为了您的信息，现在使用 headerBackground 道具更容易 .

您可以使用渐变标头执行此操作：

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

即使使用SafeArea for IosX，此解决方案也能很好地工作

回复于 2024-04-29T03:55:10+08:00

与此问题类似：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

创建包含在“线性渐变”中的“ Headers ”组件 . 通过制作 Headers backgroundColor: 'transparent' ，您将显示包裹它的线性渐变 .

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

返回屏幕， Headers 为 GradientHeader 组件 .

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

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

Gradient Header

回复于 2024-04-29T03:55:10+08:00

反应导航 - Headers 的渐变颜色

3 回答

相关问题