react-native-router-flux navbarにどのようにロゴを実装できますか？

Question

現在、私は、反応ネイティブルータフラックスナビゲーションバーにpngファイルであるロゴを実装しようとしています。オンラインでサンプルを見つけられなかったので、これが可能かどうかはわかりません。私は、反応native-router-fluxから 'navigationBarBackgroundImage'プロパティを使用しようとしました。以下のコードでは、sceneStyleプロパティとnavigationBarStyleプロパティは機能しますが、背景イメージは機能しません。何かアドバイス？

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

Answer 1

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 2

を試してみて、私はルートシーンに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 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;