React Navigation：访问不在 TabNavigator 中的页面

Question

我有 3 个主要屏幕组件，它们是我 TabNavigator 中的选项卡：Feed、Discover 和 Me。我还有其他页面，我需要能够从这 3 个主要页面导航到这些页面。但是，我不能只在我的 TabNavigator 中嵌套一个 StackNavigator，因为我的一些子页面需要能够从每个选项卡访问。

这很像 Instagram 等应用程序的工作方式。假设您正在查看您的提要，然后点击某人的用户名，他们的页面就会出现。但是，也可以从您的用户页面访问此用户的页面，方法是在您的关注者列表中找到他们的用户名。

我应该如何配置我的导航？

Answer 1

请从我做的这些项目中得到灵感。

https://github.com/paraswatts/StackNavigator-inside-TabNavigator

https://github.com/paraswatts/ParasWatts

//App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
import RootStack from './src/home';
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <RootStack/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

//home.js


import { StackNavigator } from 'react-navigation';
import Tab from './tab';
import SomeScreen from './somescreen';

const RootStack = StackNavigator({
    Tab: {
      screen: Tab,
    },
    SomeScreen: {
        screen: SomeScreen,
      },
  });

  export default RootStack;

//tab.js

import { TabNavigator } from 'react-navigation';
import Tab1 from './tab1';
import Tab2 from './tab2';
const Tabs = TabNavigator({
    Tab1: {
      screen: Tab1,
    },
    Tab2: {
        screen: Tab2,
      },

  });

  export default Tabs;

//tab1.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class Tab1 extends Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Tab1!
        </Text>
        <TouchableOpacity style={{width:300,height:50,borderColor:'#000',borderWidth:2}} onPress={()=>{

            navigate('SomeScreen',{tabno:'one'})
        }}>
        <Text style={styles.welcome}>
          Go to another screen
        </Text>
        </TouchableOpacity>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


//tab2.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class Tab2 extends Component {
  render() {            
    const { navigate } = this.props.navigation






    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
        Welcome to Tab2!
        </Text>
        <TouchableOpacity style={{width:200,height:50,borderColor:'#000',borderWidth:2}} onPress={()=>{

navigate('SomeScreen',{tabno:'two'})
}}>
<Text>
Go to another screen
</Text>
</TouchableOpacity>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


//somescreen.js


/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class SomeScreen extends Component {

  render() {
    const {params} = this.props.navigation.state      
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Coming from Tab Number  {params.tabno}
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 2

您可以将 tabBarComponent 设置为任何 React 组件。这样你就可以自定义你的标签栏，你可以处理你想要显示的屏幕（在你的情况下只有三个）

您还可以向 tabNavigator 添加任意数量的屏幕，所有这些屏幕都将具有所有可用的导航器道具。这样您就可以从任何屏幕跳转到任何屏幕。您将完全控制向用户显示的内容以及导航到任何地方。

React Navigation：访问不在 TabNavigator 中的页面

React Navigation: Access pages not in TabNavigator

reactjs

react-native

react-navigation