react-native - 如何在 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 道具向 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} />
        ...
});

Answer 2

构建场景时，将renderTitle()方法传递到场景组件中，您可以在其中插入图像。确保您获得了图像文件的正确相对路径。

    import React from 'react';
    import { View, Image } from 'react-native';
    import { Scene, Router } from 'react-native-router-flux';
    import Feed from './components/Feed';
    import LogoText from './assets/logo-text.png';


    const RouterComponent = () => {
      return (
        <Router>
          <Scene
            key="Feed"
            renderTitle={() => (
              <View>
                <Image style={styles.headerLogo} source={LogoText} />
              </View>
            )}
            renderBackButton={() => (null)}
            navigationBarStyle={styles.header}
            component={Feed}
          />
        </Router>
      );
    };

    const styles = {
      header: {
        backgroundColor: 'lightgrey',
        padding: 25,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        height: 64,
      },
      headerLogo: {
        height: 14,
        width: 90,
      },
    };

    export default RouterComponent;

Answer 3

查看 github 页面上的问题部分。

尝试这个

    navigationBarBackgroundImage={{
        uri: 'navbar-background', // reference to resource
        width: Dimensions.get('window').width, // make sure the image stretches all the way
        height: 64, // height of the navbar
    }}