React 네이티브 - React Navigation 고정 컴포넌트가 맨 위에 있습니다.

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

에서 세부 정보보기