react-native - 如何在选项卡导航器中嵌套包装堆栈导航器的组件

Question

当前行为 我正在尝试拥有一个选项卡导航器，其中一个屏幕/选项卡有一个组件，除其他外，其中有一个堆栈导航器。但是，我目前收到“导航状态中未找到“路线”错误。

如何重现我目前正在运行的代码也可以作为零食找到。代码：

    import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';

class ScreenA extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'A',
  };

  render() {
    return (
      <View>
        <Text>Screen A</Text>
      </View>
    );
  }
}

class SettingsHome extends React.Component {
  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}>
        <Text>Navigate to Settings A</Text>
      </Button>
    );
  }
}

class SettingsScreenA extends React.Component {
  render() {
    return (
      <View>
        <Text>Settings A</Text>
        <Button onPress={() => this.props.navigation.navigate('SettingsA')}>
          <Text>Back to SettingsHome</Text>
        </Button>
      </View>
    );
  }
}

const SettingsStackNavigator = createStackNavigator({
  SettingsHome: { screen: SettingsHome },
  SettingsScreenA: { screen: SettingsScreenA }
})

class SettingsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Settings',
  }

  render() {
    return (
      <View>
        <Text>Some other components...</Text>
        <SettingsStackNavigator navigation={this.props.navigation}/>
      </View>
    );
  }
}

const RootTabNavigator = createBottomTabNavigator({
  ScreenA: { screen: ScreenA },
  Settings: {screen: SettingsScreen },
});

const Navigation = createAppContainer(RootTabNavigator);

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

标签： react-nativereact-navigation

Answer 1

在此按钮中您要导航到SettingsA

<Button onPress={() => this.props.navigation.navigate('SettingsA')}>
          <Text>Back to SettingsHome</Text>
        </Button>

但是您将设置屏幕的路线定义为Settings

const RootTabNavigator = createBottomTabNavigator({
  ScreenA: { screen: ScreenA },
  Settings: {screen: SettingsScreen },
});

您必须通过在选项卡导航器中将 SettingsA 更改为路由名称来修复它

const RootTabNavigator = createBottomTabNavigator({
  ScreenA: { screen: ScreenA },
  SettingsA: {screen: SettingsScreen },
});