빵빵빵빵
90
2019-05-27 22:36:13
0
162

(코드 간단합니다) react native navigation 질문드립니다 도와주세요..


안녕하세요
react native 공부하고 있는 학생입니다




설명 : 사진의 아래에는 홈, 카테고리, 찾기 등등 
총 6가지 탭이 있고, 
각각의 탭은 각각 다른 상단 타이틀과 
각각 다른 중앙 화면을 보여줍니다
왼쪽 상단 메뉴버튼은 고정(모든 탭에 표시)입니다

원하는 것 : "왼쪽 상단 메뉴 버튼"을 6개 모든 탭에 표시하는 것이아니라, 특정 탭에서만 표시되도록 하고 싶습니다

예를 들어, 홈, My 탭에만 "왼쪽 상단 메뉴 버튼" 을 표시

아래는 코드입니다





중간 코드 생략했습니다











위, 아래 코드는 같은 코드입니다



class 홈 extends Component{
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
       <Text>home</Text>
      </View>
    )
  }
}

class 카테고리 extends Component{
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
       <Text>카테고리</Text>
      </View>
    )
  }
}

class 찾기 extends Component{
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
       <Text>찾기</Text>
      </View>
    )
  }
}

class Myy extends Component{
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
       <Text>My</Text>
      </View>
    )
  }
}

class 장바구니 extends Component{
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
       <Text>장바구니</Text>
      </View>
    )
  }
}

class 최근 extends Component{
  render(){
    return(
      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
       <Text>최근 본</Text>
      </View>
    )
  }
}


const AppBottomTabNavigator = createBottomTabNavigator({
  홈 : {
    screen: 홈,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Ionicons name="md-home" color={tintColor} size={24} />
      )
    }
  },
  카테고리 : {
    screen: 카테고리,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Ionicons name="md-menu" color={tintColor} size={24} />
      )
    }
  },
  찾기 : {
    screen: 찾기,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Ionicons name="md-search" color={tintColor} size={24} />
      )
    }
  },
  My : {
    screen: Myy,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Ionicons name="md-person" color={tintColor} size={24} />
      )
    }
  },
  장바구니 : {
    screen: 장바구니,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Ionicons name="md-cart" color={tintColor} size={24} />
      )
    }
  },
  최근 : {
    screen: 최근,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Ionicons name="md-images" color={tintColor} size={24} />
      )
    }
  }
},{
  navigationOptions: ({navigation}) => {
    const {routeName} = navigation.state.routes[navigation.state.index]
    return {
      headerTitle: routeName
    }
  },
   tabBarOptions: {
     activeTintColor: 'red'
 }
})

const AppStackNavigator = createStackNavigator({
  AppBottomTabNavigator: AppBottomTabNavigator
},{
  defaultNavigationOptions: ({ navigation }) => ({
      headerLeft: <Ionicons style={{ paddingLeft: 10 }}
                             name="md-menu"
                             size={30}
                             onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
                            />})
})

const AppDrawerNavigator = createDrawerNavigator({
  로그인 : {
    screen: AppStackNavigator
  }
},{
    drawerWidth : 320
  }
)

class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
export default App;

const AppContainer = createAppContainer(AppStackNavigator);


0
0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.