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

Question

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

这很像Instagram这样的应用程序。比如说，您正在查看自己的Feed，然后点按某人的用户名并显示其页面。但是，也可以通过在您的关注者列表中查找用户名来从您的用户页面访问此用户的页面。

我该如何配置导航？

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设置为任何反应组件。这样你就可以自定义tabbar，你可以处理你想要显示的屏幕（在你的情况下只有三个）

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