React Native - Reagieren Navigation feste Komponente an der Spitze

Question

Ich versuche, Navigation in meinem nativen Projekt reagieren. Ich benutze TabNavigator für den Inhalt wechseln und ich möchte eine feste obere Leiste mit meinem Logo im Inneren machen, jedes Mal, wenn ich wische, um den Tab-Inhalt zu ändern, sind die Logo-Stick auf der Oberseite und nicht zu bewegen.

Jetzt stelle ich nur die topcontainer in meinem 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> 
      ) 
     }, 
    } 
); 

Sie benutzerdefinierten Header verwenden können. Siehe Detail von this