如何在 react-native-navigation 中为导航器添加背景图片

Question

我想在 Wix 的 React Native Navigation 中为导航器添加背景图片。这可能吗？

This is where I want to add the image

Answer 1

不，这不可能，要实现它，您需要创建自己的导航栏并隐藏 wix 的导航栏：

  static navigatorStyle = {
    navBarHidden: true,
  };

然后您可以尝试自己编写：

return (
  <View
    style={[
      styles.navBar, // here you can pass image
      style,
      typeof renderRightContent === 'function' && styles.withRightButton,
    ]}
  >
    {typeof renderTitle === 'function' && renderTitle()}
    {!hideBackButton &&
      <TouchableOpacity
        style={styles.backButton}
        onPress={onPress || (() => navigator.pop())}
      >
        {!hideBackArrow &&
          <Image source={require('../../assets/arrow_left_icon.png')} />}
        <Text style={styles.backTitle}>
          {leftTitle || I18n.t('common.backButton')}
        </Text>
      </TouchableOpacity>}
    {typeof renderRightContent === 'function' && renderRightContent()}
  </View>
);

几天前我写了这样的东西

Answer 2

只有隐藏导航栏并编写自己的自定义栏才能实现。你也可以像你设计中提到的那样给它一个底部阴影。

static navigatorStyle = {
   navBarHidden: true
};

const NavBar = (
  <View>
  // your content
  </View>
);

并且在你的渲染函数中，你可以直接使用它来隐藏原生栏。

render() {
   return (
      <View style={{flex: 1}}>
         <NavBar />
         <View style={{flex: 1}}>
         // render your page content here
         </View>
      </View>
   );
}

如何在 react-native-navigation 中为导航器添加背景图片

How to add background image to navigator in react-native-navigation

javascript

android

react-native

react-native-navigation