react-native-router-flux navbar에서 로고를 어떻게 구현할 수 있습니까?

Question

현재 react-native-router-flux navbar에 png 파일 인 로고를 구현하려고합니다. 온라인으로 예제를 찾지 못했기 때문에 가능한지 확실하지 않습니다. 반응 native-router-flux에서 'navigationBarBackgroundImage'속성을 사용해 보았습니다. 아래 코드에서는 sceneStyle 및 navigationBarStyle 속성이 작동하지만 배경 이미지는 작동하지 않습니다. 어떤 충고?

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

Answer 1

github 페이지의 문제 섹션을 확인하십시오.

내가 루트 장면에 renderTitle 소품을 사용하여 NavBy에 로고를 추가하고 사용자 지정 구성 요소 렌더링이

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

보십시오 : 당신의 장면을 구축 할 때

이

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;