如何同时使用stacknavigator和tabnavigator？

Question

目前，我有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',
  }
);

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

Answer 1

使用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'
  },
}
);