Javascript 如何同时使用stacknavigator和tabnavigator？

目前我有redux和stacknavigator，我想实现一个底部选项卡导航器。通过这篇文章，我了解了tabnavigator，我不知道如何实现这两个功能。这是我当前的App.js：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

import store from './store'; //Import the store

import Home from './components/home' //Import the component file
import Cart from './components/cart';
import SearchResults from './components/searchResults';

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Root />
            </Provider>
        );
    }
}


const Root = createStackNavigator(
  {
    Home: {
      screen: Home
    },
    Cart:{
      screen: Cart
    },
    SearchResults:{
      screen: SearchResults
    }
  }, 
  {
    initialRouteName: 'Home',
  }
);

import React，{Component}来自'React'；
从'react redux'导入{Provider}；
从“反应导航”导入{createStackNavigator}；
从“react native”导入{YellowBox}；
ignoreWarnings（['Warning:isMounted（…）已弃用，'Module RCTImageLoader']）；
从“./store”导入存储//导入商店
从“./components/Home”导入Home//导入组件文件
从“./组件/购物车”导入购物车；
从“./components/SearchResults”导入搜索结果；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const Root=createStackNavigator(
{
主页：{
屏幕：主页
},
购物车：{
屏幕：购物车
},
搜索结果：{
屏幕：搜索结果
}
}, 
{
initialRouteName:“主页”，
}
);

---

我需要使用stacknavigator来触发我的搜索按钮并从中传递数据，同时使用redux。在这种情况下，我是否也可以使用底部选项卡导航器？

使用stacknavigator创建不同的stck，然后在tabnavigator中添加这些堆栈。通常，每个堆栈都应该属于任何选项卡。若你们有用户堆栈和用户详细信息屏幕，但只有用户列表选项卡，那个么用户详细信息屏幕也会突出显示用户列表选项卡。下面的代码与您的代码无关，但可能会给您一些想法

const homeStack = createStackNavigator({
  Home: { 
    screen: Home, 
    navigationOptions:{
      title  : "Home",
      ...headerStyle
    }
  },
  AboutUs: {  
    screen: AboutUs, 
    navigationOptions:{
      title  : "About Us",
      ...headerStyle
    }
  },
})

const pickerStack = createStackNavigator({ 
  UsersList: { 
    screen: UsersList, 
    navigationOptions:{
      title  : "Users List",
      ...headerStyle
    }
  },
  UsersDetails: {
    screen: UsersDetails, 
    navigationOptions:{
      title  : "Users Details",
      ...headerStyle
    }
  },
  PickerSignup: {
    screen: PickerSignup, 
    navigationOptions:{
      title  : "Signup as a Picker",
      ...headerStyle
    }
  }  
});

const App = createBottomTabNavigator({
  Home: homeStack,   
  Users: pickerStack
},    
{ 
  initialRouteName : "Home", 
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      let routeIconMapping = {
        'Home' : 'home',
        'Users':'account-multiple',
        'Food':'food'
      }
      iconName = (routeName && routeIconMapping[routeName]) ? routeIconMapping[routeName] : 'home';
      return <MatIcon name={iconName} size={25} color={tintColor} />;
    },
  }), 
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
    activeBackgroundColor: 'white'
  },
}
);

const homeStack=createStackNavigator({
主页：{
屏幕：主页，
导航选项：{
标题：“家”，
…头型
}
},
关于：{
屏幕：AboutUs，
导航选项：{
标题：“关于我们”，
…头型
}
},
})
const pickerStack=createStackNavigator（{
用户列表：{
屏幕：UsersList，
导航选项：{
标题：“用户列表”，
…头型
}
},
用户详细信息：{
屏幕：UsersDetails，
导航选项：{
标题：“用户详细信息”，
…头型
}
},
拾音器启动：{
屏幕：PickerSignup，
导航选项：{
标题：“注册为挑选者”，
…头型
}
}  
});
const App=createBottomTabNavigator({
家：家装，
用户：pickerStack
},    
{ 
初始路由名称：“主页”，
导航选项：（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
让RouteConMapping={
‘家’：‘家’，
“用户”：“帐户-多个”，
“食物”：“食物”
}
iconName=（routeName&&RouteConMapping[routeName]）？RouteConMapping[routeName]：“home”；
回来
},
}), 
选项卡选项：{
activeTintColor:‘番茄’，
颜色：“灰色”，
activeBackgroundColor:“白色”
},
}
);

使用stacknavigator创建不同的stck，然后在tabnavigator中添加这些堆栈。通常，每个堆栈都应该属于任何选项卡。若你们有用户堆栈和用户详细信息屏幕，但只有用户列表选项卡，那个么用户详细信息屏幕也会突出显示用户列表选项卡。下面的代码与您的代码无关，但可能会给您一些想法

const homeStack = createStackNavigator({
  Home: { 
    screen: Home, 
    navigationOptions:{
      title  : "Home",
      ...headerStyle
    }
  },
  AboutUs: {  
    screen: AboutUs, 
    navigationOptions:{
      title  : "About Us",
      ...headerStyle
    }
  },
})

const pickerStack = createStackNavigator({ 
  UsersList: { 
    screen: UsersList, 
    navigationOptions:{
      title  : "Users List",
      ...headerStyle
    }
  },
  UsersDetails: {
    screen: UsersDetails, 
    navigationOptions:{
      title  : "Users Details",
      ...headerStyle
    }
  },
  PickerSignup: {
    screen: PickerSignup, 
    navigationOptions:{
      title  : "Signup as a Picker",
      ...headerStyle
    }
  }  
});

const App = createBottomTabNavigator({
  Home: homeStack,   
  Users: pickerStack
},    
{ 
  initialRouteName : "Home", 
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      let routeIconMapping = {
        'Home' : 'home',
        'Users':'account-multiple',
        'Food':'food'
      }
      iconName = (routeName && routeIconMapping[routeName]) ? routeIconMapping[routeName] : 'home';
      return <MatIcon name={iconName} size={25} color={tintColor} />;
    },
  }), 
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
    activeBackgroundColor: 'white'
  },
}
);

const homeStack=createStackNavigator({
主页：{
屏幕：主页，
导航选项：{
标题：“家”，
…头型
}
},
关于：{
屏幕：AboutUs，
导航选项：{
标题：“关于我们”，
…头型
}
},
})
const pickerStack=createStackNavigator（{
用户列表：{
屏幕：UsersList，
导航选项：{
标题：“用户列表”，
…头型
}
},
用户详细信息：{
屏幕：UsersDetails，
导航选项：{
标题：“用户详细信息”，
…头型
}
},
拾音器启动：{
屏幕：PickerSignup，
导航选项：{
标题：“注册为挑选者”，
…头型
}
}  
});
const App=createBottomTabNavigator({
家：家装，
用户：pickerStack
},    
{ 
初始路由名称：“主页”，
导航选项：（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
让RouteConMapping={
‘家’：‘家’，
“用户”：“帐户-多个”，
“食物”：“食物”
}
iconName=（routeName&&RouteConMapping[routeName]）？RouteConMapping[routeName]：“home”；
回来
},
}), 
选项卡选项：{
activeTintColor:‘番茄’，
颜色：“灰色”，
activeBackgroundColor:“白色”
},
}
);

欢迎光临。很高兴它来了。很高兴有帮助