选项卡导航器重置

Question

我在 react-native 中使用 TabNavigator 和 StackNavigator 有问题。我想在按下按钮时重置导航。我的选项卡导航中有堆栈导航。问题是我只能重置一个导航...

计划：

-tabNavigator
   -listing.js
   -stackNavigator
      -types.js
      -picture.js
      -ad.js

所以当我在广告中时.js当我点击它时我有一个按钮，我的堆栈导航重置为键入.js并在列表上设置选项卡导航器.js所以我很想把林斯汀.js最后送回去。

我的导航 ： 导航.js

export const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Types'}),
  ],
  key: null
})
export const listingAction = NavigationActions.navigate({
    routeName: 'Listing',
  })

const Stack = StackNavigator(
  {
    Types: {screen: SelectTypesScreen},
    Picture: {screen: SelectPictureScreen},
    Ad: {screen: CreateAd}
  })
const Tab = TabNavigator(
  {
    Listing: {screen: ListingScreen},
    Preference: {screen: PreferencesScreen},
    Add: {screen : Stack}
  },
  {
  }
)
export default class App extends Component {
    render() {
      return (
          <Tab />
      );
    }
  }

选项卡 导航 检查.js

export default class Listing extends Component {
    render() {
        return (
            <View>
                <Text> Listing </Text>
            </View>
        );
    }
}

堆栈导航广告.js

export default class CreateAd extends Component {
    render() {
        return (
            <View>
                <Text style={{marginTop: '80%', marginLeft: '40%'}}> Ad </Text>
                <Button title="Ok" onPress={() => {console.log("displayer 1"), this.props.navigation.dispatch(resetAction), console.log("displayer 2"), this.props.navigation.dispatch(listingAction)}} />
            </View>
        );
    }
}

Answer 1

最好更改导航嵌套结构。最好以确切的方式作为文档。根导航器可以是堆栈导航器，您可以将选项卡导航器作为屏幕添加到其中

const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});
const SimpleApp = StackNavigator({
  Home: { screen: MainScreenNavigator },
  Chat: { screen: ChatScreen },
});

参考文档https://reactnavigation.org/docs/intro/nesting