Question

目前我正在尝试在react-native-router-flux导航栏中实现徽标，这是一个png文件。我不确定这是否可行，因为我还没有在网上找到任何例子。我尝试过使用＆＃39; navigationBarBackgroundImage＆＃39;来自react-native-router-flux的属性。在下面的代码中，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

查看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
    }}

Answer 3

构建场景时，将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;

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

3 个答案: