今回紹介するのは、navigationコンポーネントのreact-navigationの使用方法です。一般的なアプリケーションでは、ルーティングの特別な処理が必要になるため、タブ間を移動する必要があります。この記事では、優れた分析を提供します。
具体的な状況は次のとおりです: アプリは 3 つの主要モジュール (Home、Bill、Me) に分割されており、3 つのタブに対応しています。現在の要件は Home プッシュです。 HomeTwo、HomeTwo プッシュ BillTwo、BillTwo Bill 請求書ホームページに戻ります。
const Components = { HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' }, HomeThree: { screen: HomeThree, path:'app/HomeThree' }, BillTwo: { screen: BillTwo, path:'app/BillTwo' }, BillThree: { screen: BillThree, path:'app/BillThree' }, } const Tabs = TabNavigator({ Home: { screen: Home, path:'app/home', navigationOptions: { tabBar: { label: '首页', icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } }, Bill: { screen: Bill, path:'app/bill', navigationOptions: { tabBar: { label: '账单', icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } }, Me: { screen: Me, path:'app/me', navigationOptions: { tabBar: { label: '我', icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>), }, } } }, { tabBarPosition: 'bottom', swipeEnabled: false, animationEnabled: false, lazyLoad: false, backBehavior: 'none', tabBarOptions: { activeTintColor: '#ff8500', inactiveTintColor: '#999', showIcon: true, indicatorStyle: { height: 0 }, style: { backgroundColor: '#fff', }, labelStyle: { fontSize: 10, }, }, }); const Navs = StackNavigator({ Home: { screen: Tabs, path:'app/Home' }, Bill: { screen: Tabs, path:'app/Bill' }, Me: { screen: Tabs, path:'app/Me' }, ...Components }, { initialRouteName: 'Home', navigationOptions: { header: { style: { backgroundColor: '#fff' }, titleStyle: { color: 'green' } }, cardStack: { gesturesEnabled: true } }, mode: 'card', headerMode: 'screen' });
HomeTwo の React-navigation に付属するリセット アクションを使用して、ルーティング情報をリセットします。
// push BillTwo this.props.navigation.dispatch(resetAction); // 使用reset action重置路由 const resetAction = NavigationActions.reset({ index: 1, // 注意不要越界 actions: [ // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo NavigationActions.navigate({ routeName: 'Bill'}), NavigationActions.navigate({ routeName: 'BillTwo'}) ] });
HomeTwo から BillTwo ページにプッシュした後、BillTwo の をクリックします左上隅にあるナビゲーション ボタン をクリックして、Bill ホームページに戻ります
上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 php中国語のウェブサイトです!
関連書籍:
以上がナビゲーションコンポーネントreact-navigationの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。