web-dev-qa-db-ja.com

Reactナビゲーション-ヘッダーのグラデーション色

React Navigation in React Native appを使用していて、ヘッダーのbackgroundColorをグラデーションに変更したいのですが、ノードモジュールがあることがわかりました。反応ネイティブで勾配を達成するための反応ネイティブ線形勾配

そのようなルートStackNavigatorがあります：

const Router = StackNavigator({

Login: {
    screen: Login,
    navigationOptions: ({navigation}) => ({
       headerTitle: <Text>SomeTitle</Text>
       headerLeft: <SearchAndAgent />,
       headerRight: <TouchableOpacity
        onPress={() => { null }
    </TouchableOpacity>,
    headerStyle: { backgroundColor: '#005D97' },
    }),
},
});

私はそのようにグラデーションになるようにテキストまたはビューをラップすることができます：

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

linearGradientモジュールを使用するために、navigationOptionsでヘッダーの背景をラップするにはどうすればよいですか？

カスタムヘッダーコンポーネントを作成して使用できることはわかっていますが、これを行うと、Reactからのすべてのネイティブナビゲーションアニメーションが2つのルート間のタイトルアニメーションのように機能しないため、役に立ちません。

助けてくれてありがとう！

reactjsreact-nativereact-navigation
13
Eran Abir

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

参考までに、headerBackgroundの小道具を使用すると、より簡単になります。

これを行うだけでグラデーションヘッダーを持つことができます：

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

このソリューションはSafeArea for IosXでもうまく機能します

25
Steeve Pitis

この問題に似ています： React Navigation;ヘッダーで画像を使用しますか？

線形グラデーションの場合は、単に>

//imports

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

//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} />,
  }
});

上記のコードを使用すると、次のようになります。

グラデーションヘッダー

4
Mark P

エキスポのLinearGradientコンポーネントを使用できます。これは便利なコンポーネントであり、react-native-linear-gradientのような別のライブラリをインストールすることはできません。 https://docs.expo.io/versions/latest/sdk/linear-gradient/ 。ちなみに、戻るボタンは変更できます。簡単です。

あなたはそのようなnavigationOptionsを使って画面内にそれを実装することができます

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>
    ),
  };
};
0
Gapur Kassym