如何在react-native-navigation中将背景图像添加到导航器

时间:2018-07-05 08:23:36

标签: javascript android react-native react-native-navigation

我想在通过Wix响应本机导航时将背景图像添加到导航器中。那有可能吗?

This is where I want to add the image

2 个答案:

答案 0 :(得分:0)

不可能,要实现它,您需要创建自己的导航栏并隐藏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>
);

几天前,我写了这样的东西

答案 1 :(得分:0)

仅当隐藏导航栏并编写自己的自定义栏时才能实现。您也可以按照设计中的说明为其添加阴影。

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