0

TabNavigatorとStackNavigatorを使用して React Native アプリを構築しています。

  • React Native アプリのルート レベルでTabNavigatorを使用しています。
  • TabNavigator内の各ルートはStackNavigatorにマップされます。
  • 各StackNavigatorにはn個の画面があります。

私が[設定] タブにいて、ユーザー設定の 3 画面奥深くにいると仮定しましょう-> 支払いオプション -> クレジット カード 1。

[設定] タブをタップするたびに、1 つの画面に戻りたいと思います。

  • タップ 1:クレジット カード 1 -> 支払いオプション
  • タップ 2:支払いオプション -> ユーザー設定
  • タップ 3:ユーザー設定 -> 設定

これどうやってするの？

4

1 に答える 1

1

重要なのは、スタック ビューのルート インデックスが 0 でない場合、ルートのメソッド内で適切なナビゲーション アクションをディスパッチすることです。tabBarOnPress

ここに画像の説明を入力

index.js

import React, { AppRegistry } from 'react-native'
import { Component } from 'react'
import MyTabNavigator from './components/MyTabNavigator'

class MyApp extends Component {
    render() {
        return (
            <MyTabNavigator/>
        );
    }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

MyTabNavigator.js

import HomeStackNav from './HomeStackNav'
import SettingsStackNav from './SettingsStackNav'

const goBackNavigationAction = NavigationActions.navigate({
  action: NavigationActions.back()
})

const routeConfig = {
  Home: {
    screen: HomeStackNav,
    path: 'home',
    navigationOptions: {...}
  },
  Settings: {
    screen: SettingsStackNav,
    path: 'settings',
    navigationOptions: ({ navigation }) => ({
      title: 'settings',
      tabBarLabel: 'settings',
      tabBarOnPress: (scene, jumpToIndex) => {
        jumpToIndex(scene.index)
        if (scene.route.index > 0) {                  // <----- this is
          navigation.dispatch(goBackNavigationAction) // <----- where the
        }                                             // <----- magic happens
      }
    })
  }
}

const tabNavigatorConfig = {...}

export default TabNavigator(routeConfig, tabNavigatorConfig)
于 2017-11-04T01:53:47.020 に答える