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

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

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

2 个答案: