React Navigation - 如何在选项卡导航器中嵌套包装堆栈导航器的组件答案

【问题标题】：React Navigation - How to nest a component wrapping a stack navigator inside a tab navigatorReact Navigation - 如何在选项卡导航器中嵌套包装堆栈导航器的组件
【发布时间】：2019-08-28 02:35:23
【问题描述】：

我正在尝试拥有一个选项卡导航器，其中设置屏幕/选项卡是一个组件，其中包含一个堆栈导航器。

这是我目前拥有的代码（也可以找到as a snack）。

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 组件的导航道具'

【问题讨论】：

渲染SettingsStackNavigator ...实际上渲染了一个屏幕（这是该堆栈顶部的那个）...为什么您希望在一个屏幕中有一个stackNavigator +其他组件...？
因为我的客户想要一个不同的用户界面用于纵向和横向模式，我需要以这种方式实现它:(
Some Other Components 将放置在您的 SettingsStackNavigator 的 Header 顶部 ...这是您想要的吗？
是的，但是我不能用堆栈导航器的标题栏来做
我想这里适用的解决方案是将您的 Some other components 嵌入到您的 SettingsHome 和 SettingsScreenA ++ 禁用您的 StackNavigator 的默认 Header .. 并创建一个自定义的而不是放置在你的组件中间......

标签： javascript react-native react-navigation

【解决方案1】：

您需要将组件本身嵌套在stackNavigator 中，包含所有stackScreen，就像这样；

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 style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text>Screen A</Text>
      </View>
    );
  }
}

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

class SettingsScreenA extends React.Component {
  render() {
    return (
      <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text>Settings A</Text>
        <Button onPress={() => this.props.navigation.navigate('SettingsHome')}
          title ="Back to SettingsHome"
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text>Some other components...</Text>
          <Button title="Seting A" onPress={() => this.props.navigation.navigate('SettingsScreenA')} />

      </View>
    );
  }
}

// Create our stack navigator
const SettingsStackNavigator = createStackNavigator({
  SettingsMain: {screen: SettingsScreen,},
  SettingsHome: { screen: SettingsHome },
  SettingsScreenA: { screen: SettingsScreenA }
}, {initialRouteName: 'SettingsMain'})



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

// And the app container
export default createAppContainer(RootTabNavigator);

希望对你有帮助！

【讨论】：