如何同时使用 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 创建不同的堆栈，然后在 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'
  },
}
);