react-native – 在StackNavigator中使用TabsNavigator

发布时间：2020-12-15 05:06:36 所属栏目：百科来源：网络整理

导读：我正在使用React-Navigation并且我有一个StackNavigator,这是带有Stack Tabs Navigator的app.js： import React from 'react';import { AppRegistry } from 'react-native';import { StackNavigator,TabNavigator } from 'react-navigation';import LoginScr

我正在使用React-Navigation并且我有一个StackNavigator,这是带有Stack Tabs Navigator的app.js：

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator,TabNavigator } from 'react-navigation';

import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
import FriendsScreen from './app/screens/FriendsScreen';

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,navigationOptions: ({navigation}) =>({
       header: null,}),},Register:{
      screen: RegisterScreen,navigationOptions: ({navigation}) =>({
        header: null,Home:{
     screen: HomeScreen,navigationOptions: ({navigation}) =>({
       title: "Home",});

const TabsNav = TabNavigator({
  Home: {
    screen: HomeScreen,navigationOptions: ({navigation})=>({
      title: "Home",Friends: {
    screen: FriendsScreen,navigationOptions: ({navigation})=>({
      title: "My Friends",});
export default Stylelist;

我想在HomeScreen中有2个标签,一个是Home本身,另一个是FriendsScreen,我该怎么做？
我试着查看reactnavigation.org但是无法理解如何做到这一点.

提前致谢！

您可以使用TabNavigator作为StackNavigator的屏幕来嵌套.

const Stylelist = StackNavigator({
  Login: {
    screen: LoginScreen,navigationOptions: ({ navigation }) => ({
      header: null,Register: {
    screen: RegisterScreen,Home: {
    screen: TabNavigator({
      Home: {
        screen: HomeScreen,navigationOptions: ({ navigation }) => ({
          title: 'Home',Friends: {
        screen: FriendsScreen,navigationOptions: ({ navigation }) => ({
          title: 'My Friends',navigationOptions: ({ navigation }) => ({
      title: 'Home',});

export default Stylelist;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!