4

現在、react-native-router-flux navbar に png ファイルであるロゴを実装しようとしています。オンラインで例が見つからないため、これが可能かどうかはわかりません。react-native-router-flux の「navigationBarBackgroundImage」プロパティを使用してみました。以下のコードでは、sceneStyle および navigationBarStyle プロパティは機能しますが、背景画像は機能しません。何かアドバイス？

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

3 に答える 3

9

ルート シーンで 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} />
        ...
});
于 2016-12-01T18:39:24.463 に答える
1

シーンを構築するときに、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;
于 2017-05-04T15:55:32.623 に答える
0

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
    }}
于 2016-10-20T21:38:35.937 に答える