web-dev-qa-db-ja.com

Reactナビゲーション;ヘッダーで画像を使用しますか？

反応ネイティブプロジェクトで反応ナビゲーションを使用しており、ヘッダーを画像でカスタマイズしたいと思います。

色にはシンプルなスタイルを使用できますが、react nativeは背景画像をサポートしていないため、別のソリューションが必要です。

reactjsreact-nativereact-navigation
8
Koen.

更新：

ライブラリのv2以降、ヘッダーの背景を設定するための特別なオプション、つまりheaderBackgroundがあります。

このオプションはReactコンポーネントを受け入れるため、Imageコンポーネントに設定すると、それが使用されます。

例えば：

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
}, {
  navigationOptions: {
    headerBackground: (
      <Image
        style={StyleSheet.absoluteFill}
        source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
      />
    ),
  }
});

作業例： https://snack.expo.io/@koen/react-navigation-header-background

古い回答、まだReact Navigation v1：を使用している場合）

画像を使用したカスタムヘッダーの作成は、実際には非常に簡単です。

ヘッダーをビューでラップし、そのビューに絶対位置の画像を配置すると、画像はその親サイズに拡大縮小されます。

重要なのは、デフォルトヘッダーのbackgroundColorをtransparentに設定することです。

const ImageHeader = props => (
  <View style={{ backgroundColor: '#eee' }}>
    <Image
      style={StyleSheet.absoluteFill}
      source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
    />
    <Header {...props} style={{ backgroundColor: 'transparent' }}/>
  </View>
);

そして、そのコンポーネントをヘッダーとして使用します。

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

結果は次のようになります：

16
Koen.