时间戳

首页 > 解决方案 > 自定义导航栏 - 不同场景下的不同图像

react-native - 自定义导航栏 - 不同场景下的不同图像

问题描述

我是反应原生的新手，我有问题。在我的应用程序中有 3 个场景和自定义导航栏。我需要不同场景的不同图像。如果我只改变背景，它的工作很完美，但我需要更多它的平均图像

//路由器.js

<Scene key="root" navBar={Navbar} drawer contentComponent={Drawer}>
          <Scene key="home" component={Home} initial={true} hideNavBar={true} />
          <Scene key="op" ref="Op" component={Op} 
            navigationBarStyle = {styles.sceneOp} 
            />
          <Scene key="about" component={About} 
            navigationBarStyle = {styles.sceneAbout} 
            />

        </Scene>
...
const styles = StyleSheet.create({
  sceneOp: {
    backgroundColor: 'grey',
  },
  sceneAbout: {
    backgroundColor: 'yellow',
  }
});

//navbar.js - 在这个文件中，我需要我的 dynamicLogo 是像 navigationBarStyle 这样的道具。这个怎么做？

  render() {

    let dynamicLogo = navStyle.assets.img;

    return (
      <View style={styles.outerContainer, this.props.navigationBarStyle}>
        <View style={styles.innerContainer}>
          <TouchableOpacity
            onPress={() => {
              Actions.drawerOpen();
            }}
            style={styles.sideElementContainer}
          >
            <Image style={styles.burger} source={require('../assets/burger-icon.png')} />
          </TouchableOpacity>

          <View style={styles.logoContainer}>
            <Image style={styles.logo} source={dynamicLogo} />
          </View>
          <View style={styles.sideElementContainer} />
        </View>
      </View>
    );
  }

标签： react-native

解决方案

我通过使用 renderTitle 做到了

//Routers.js

<Scene key="root" navBar={Navbar} drawer contentComponent={Drawer}>
          <Scene key="home" component={Home} initial={true} hideNavBar={true} />
          <Scene key="op" ref="Op" component={Op} 
            navigationBarStyle = {styles.sceneOp} 
            renderTitle={navImage.imgExto}
            />
          <Scene key="about" component={About} 
            navigationBarStyle = {styles.sceneAbout} 
            renderTitle={navImage.imgMe}
            />
        </Scene>
...
const navImage = {
  imgExto: require('./assets/e-logo.png'),
  imgMe: require('./assets/m-logo.png'),
};

推荐阅读