如何在react-native-router-flux导航栏中实现徽标？

Question

目前我正在尝试在react-native-router-flux导航栏中实现徽标,这是一个png文件.我不确定这是否可行,因为我没有在网上找到任何例子.我尝试过使用react-native-router-flux的'navigationBarBackgroundImage'属性.在下面的代码中,sceneStyle和navigationBarStyle属性工作,但是,背景图像不起作用.任何建议？

    <Router
      sceneStyle={{ paddingTop: 60 }}
      navigationBarStyle={{ backgroundColor: '#80ffbf' }}
      navigationBarBackgroundImage={{src:'./Resources/GiftIt_Logo_Green.png' }}
    >

Answer 1

我通过在根场景上使用renderTitle prop为NavBy添加了一个徽标并呈现了一个自定义组件:

const AppLogo = () => {
  return (
    <View style={{ alignItems: 'center', marginTop: 26 }}>
      <Image source={require('./app/assets/images/appLogo.png')}
             style={{ width: 84, height: 27 }} />
    </View>
  );
};


const MyApp = React.createClass({

  render() {
    <Provider store={store}>
      <RouterWithRedux hideNavBar={true}>
        <Scene key="root" renderTitle={() => { return <AppLogo />; }}>
        <Scene key="home" component={HomePage} title="My App" initial={true} />
        ...
});