반응식 네비게이션을 사용하여 단일 화면 앱을 탭 기반 앱으로 변환하는 방법은 무엇입니까?

반응 네이티브 - 네비게이션에 손을 대고 싶지만 간단한 문제가 있습니다.반응식 네비게이션을 사용하여 단일 화면 앱을 탭 기반 앱으로 변환하는 방법은 무엇입니까?

앱에 탭이없는 로그인 페이지가 있습니다. (페이스 북 로그인 페이지와 매우 비슷합니다.) (이미지 참조 - The image is just to give an idea. Image Courtesy - Google 사용자가 로그인 한 후에 탭 기반 앱으로 변환하고 두 탭에 대해 서로 다른 탐색 스택을 원합니다 (앱에서 발생하는 것처럼) Quora) (이미지 심판 -. Again Image is just a reference)

I 상태 관리를 위해 mobx을 사용하고

나는 그에게 공통 사용 사례를 알고 있지만 나는 나에게 알려진 두 가지 옵션 사이에서 혼란 스러워요 -

사용자 로그인 변수에 대한 반응을 제공하고 단일 화면 앱에서 탭 기반 앱으로 변경합니다. App.js

constructor() { 
reaction(() => auth.isLoggedIn,() => app.navigateToHome()) 
reaction(() => app.root,() => this.startApp(app.root)); 
app.appInitialized();

}

startApp(root){ 
    switch (root) { 
     case 'user.login': 
     Navigation.startTabBasedApp({ 
      tabs: [ 
      { 
       label: 'One', 
       screen: 'user.login', 
       icon: require('./assets/one.png'), 
       selectedIcon: require('./assets/one_selected.png'), 
       navigatorStyle: {}, 
      } 
      ] 
      screen: { 
      screen: root, 
      title: 'Login', 
      navigatorStyle: { 
       screenBackgroundColor: colors.BACKGROUND, 
       statusBarColor: colors.BACKGROUND 
      }, 
      navigatorButtons: {} 
      } 
     }) 
     return ; 
     case 'user.home': 
     Navigation.startTabBasedApp({ 
      tabs: [ 
      { 
       label: 'One', 
       screen: 'user.home', 
       icon: require('./assets/one.png'), 
       selectedIcon: require('./assets/one_selected.png'), 
       navigatorStyle: {}, 
      }, 
      { 
       label: 'Two', 
       screen: 'user.home', 
       icon: require('./assets/two.png'), 
       selectedIcon: require('./assets/two_selected.png'), 
       title: 'Screen Two', 
       navigatorStyle: {}, 
      } 
      ], 
      animationType: 'slide-down', 
     }); 
     return; 
     default: 
      console.error('Unknown app root'); 
    } 
    }

를 사용하여 하나의 화면 응용 프로그램으나 홈 화면에서 탭을 구현 - 예 (유일한 관심사는 isLoggedIn에 대한 반응이 발생하면 애니메이션의 부족이다) . 이 방법을 사용하면 두 탭에 대해 서로 다른 탐색 스택을 직접 구현해야합니다. (반응 - 네이티브 탐색 이미 그래서, 탐색 스택에 대한 방법 1 걱정 구현합니다.)

예 - App.js

Navigation.startSingleScreenApp({ 
      screen: { 
      screen: root, 
      title: 'Login', 
      navigatorStyle: { 
       screenBackgroundColor: colors.BACKGROUND, 
       statusBarColor: colors.BACKGROUND 
      }, 
      navigatorButtons: {} 
      } 
     })

Home.js

<Tabs> 
     <Tab 
      titleStyle={{fontWeight: 'bold', fontSize: 10}} 
      selectedTitleStyle={{marginTop: -1, marginBottom: 6}} 
      selected={true} 
      renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />} 
      renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />} 
      > 
      <Feed /> 
     </Tab> 
     <Tab 
      titleStyle={{fontWeight: 'bold', fontSize: 10}} 
      selectedTitleStyle={{marginTop: -1, marginBottom: 6}} 
      selected={selectedTab === 'profile'} 
      title={selectedTab === 'profile' ? 'PROFILE' : null} 
      renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />} 
      renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />} 
      onPress={() => this.changeTab('profile')}> 
      <Profile /> 
     </Tab> 
     </Tabs>

을 반응 네이티브에서 탭을 관리하는 모범 사례는 무엇입니까? 그리고 내 사용법에서는 어떤 방법을 사용해야합니까?

출처

2017-05-04 Ashish Dulhani

나는 동일한 문제를 겪고 있습니다. 어디에서나 접근 할 수 있었습니까? – JamesG

상단 탭을 얻으려면 단일 스크린 앱을 시작한 다음 상단 탭을 정의해야합니다. 아래에서 이와 같은 작업을 수행 할 수 있습니다.

Navigation.startSingleScreenApp({ 
    screen: 'FirstScreen' 
    title: 'FirstScreenTitle' 
    topTabs: [ 
     { 
     screen:'FirstTabScreen' 
     }, 
     { 
     screen:'SecondTabScreen' 
     } 
    ] 

    });

먼저 각 탭을 개별 화면으로 등록하십시오.

출처

2017-07-27 19:59:05

반응식 네비게이션을 사용하여 단일 화면 앱을 탭 기반 앱으로 변환하는 방법은 무엇입니까?

답변

관련 문제