反応のネイティブナビゲーションでは、シングルスクリーンアプリからタブベースのアプリに移動します。

Question

1つの画面アプリからタブベースのアプリに移動する方法は不思議です。関連する回答がない類似の質問が1つあります。

現在、私は今、私は単に私がその特定の画面」とのタブを隠してログイン画面（との最初のタブをカバーしていますので、右この

Navigation.startSingleScreenApp({ 
    screen: { 
     screen: 'Login', 
     title: 'Login' 
    } 
    }); 

    Navigation.startTabBasedApp({ 
    tabs: [ 
     { 
     label: 'tab1', 
     screen: 'Login', 
     icon: tab1Icon, 
     selectedIcon: tab1Icon, 
     }, 
     title: 'tab1', 
     navigatorStyle: {}, 
     navigatorButtons: {} 
     }, 
     { 
     label: 'tab2', 
     screen: 'tab2', 
     icon: tab2Icon, 
     selectedIcon: tab2Icon, 
     title: 'tab2' 
     }, 
     { 
     label: 'tab3', 
     screen: 'tab3', 
     icon: tab3Icon, 
     selectedIcon: tab3Icon, 
     title: 'tab3' 
     }, 
    }); 

をやっている私は、ログを押すと、ボタンに私は単純にタブが表示されているtab1の画面にスタックを上に移動。

を私はstartSingleScreenAppを持っているにもかかわらず、だから、アプリはまだtabBasedAppから始まるので、私はstartSingleScreenAppは何もないかわからない。

誰かがexpこのライブラリーを使って私に進める方法を教えてくれる人はいないでしょうか？

Answer 1

ユーザが正常にログインしたときに、次にTabNavigatorを表示するためのモーダルビューを作成します。

アプリにあなたのエントリポイント、App.jsファイルで始めることができます：あなたはモーダル

import ... 

class LoginScreen extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     successfulLoginModalVisible: false 
    } 
    } 

setSuccessfulLoginModalVisible(visible) { 
    this.setState({successfulLoginModalVisible: visible}); 
    } 

... 

    render() { 
    return(
     <ViewContainer> 
     <Modal 
      animationType={"slide"} 
      visible={this.state.successfulLoginModalVisible} 
     > 
      <SuccessfulLoginScreen onLogout={() => this.hideSuccessfulLoginModal()}/> 
     </Modal> 
     </ViewContainer> 
    ); 
    } 
} 

を保存する場所

import... 

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

AppRegistry... 

これはあなたのLoginScreenアプリを起動するとしてLoginScreen.jsの内部に存在します、です

簡単に言えば、反応ネイティブでは、状態に格納されるブール値（すなわち、this.state.successfulLoginModalVisible）に応じて、モーダル自体が表示されます。単に最後に

（例えば、ボタンを押す上）setSuccessfulLoginModalVisible(true)関数を呼び出し、このモーダルを見えるようにするには、SuccessfulLoginScreen.jsを見てみましょう：

import ... 
export const MyAccountStack = StackNavigator({ //This stack will be used to manage the Tab1 stack 

    MyAccount: { screen: MyAccountTab }, 
    ViewFollowers: { screen: ViewFollowersScreen }, 
    ViewFollowing: { screen: ViewFollowingScreen }, 
    EditAccount: { screen: EditAccountScreen }, 

}); 

export default tabNavigation = TabNavigator ({ 

    Tab1: {screen: MyAccountStack, 
     navigationOptions: { 
     tabBarLabel: 'My Account', 
     } 
    }, 
    Tab2: {screen: ...}, 
    Tab3: {screen: ...}, 
    }, { 
    tabBarPosition: 'bottom', 
    swipeEnabled: true, 
    tabBarOptions: { 
     activeTintColor: 'white', 
     activeBackgroundColor: 'darkgrey', 
    } 
}); 

、このロジックは、あなたがのためにスタックを維持することができます個々のタブのそれぞれ

これは私がとるアプローチです。 iOSの開発を強調しています。私はAndroidでこの動作をチェックしていません（しかし、もしあれば、あまり違いはないと思います）。私は助けることができますように！