Reactネイティブ - リアクションナビゲーション上の固定コンポーネント

Question

私はリアクションネイティブプロジェクト内で反応ナビゲーションを試みています。私はTabNavigatorをコンテンツの切り替えに使用しています。私は、タブの内容を変更するためにスワイプするたびに、ロゴが内側にスティックされて動かないように、ロゴを内側に固定したトップバーを作りたいと思います。

今、私はちょうどあなたがカスタムヘッダを使用することができ、私のHomeScreen

class HomeScreen extends React.Component { 
     render() { 
     return(
      <View style={styles.container}> 
      <View style={styles.topcontainer}> 
       <View style={styles.applogocontainer}> 
       <Image 
       source={require('./resources/logo.png')} 
        style={styles.applogo} 
       /> 
       </View> 
      </View> 
      </View> 
     ); 
     } 
    } 

    class SecondScreen extends React.Component { 
     render() { 
     return(
      <View style={styles.container}> 
      <Text style={styles.whitetext}>Second</Text> 
      </View> 
     ); 
     } 
    } 

    class ThirdScreen extends React.Component { 
     render() { 
     return(
      <View style={styles.container}> 
      <Text style={styles.whitetext}>Third</Text> 
      </View> 
     ); 
     } 
    } 

    const TabNavs = TabNavigator({ 
     Home: { screen: HomeScreen }, 
     Second: { screen: SecondScreen }, 
     Third: { screen: ThirdScreen }, 
    },{ 
     tabBarPosition:'bottom', 
     swipeEnabled:true, 
     tabBarOptions:{ 
     tinColor: '#fff', 
     activeTintColor: '#eee', 
     inactiveTintColor: '#fff', 
     style: { 
      position: 'absolute', 
      backgroundColor: 'transparent', 
      left: 0, 
      right: 0, 
      bottom: 0, 
     }, 
     indicatorStyle:{ 
      backgroundColor:'white' 
     }, 
     showIcon:true 
     } 
    } 
    ); 

Answer 1

class HomeScreen extends React.Component { 
    render() { 
     return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
       <Text>Home Screen</Text> 
      </View> 
     ); 
    } 
} 

class SecondScreen extends React.Component { 
    render() { 
     return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
       <Text>Details Screen</Text> 
      </View> 
     ); 
    } 
} 

const RootStack = StackNavigator(
    { 
     Home: { 
      screen: HomeScreen, 
     }, 
     SecondScreen: { 
      screen: SecondScreen, 
     }, 
    }, 
    { 
     initialRouteName: 'Home', 
     navigationOptions: { 
      header: (
       <View style={styles.container}> 
        <View style={styles.topcontainer}> 
         <View style={styles.applogocontainer}> 
          <Image 
           source={require('./resources/logo.png')} 
           style={styles.applogo} 
          /> 
         </View> 
        </View> 
       </View> 
      ) 
     }, 
    } 
); 

内topcontainerを置きます。詳細はthis