反应原生导航

Question

我正在制作一个应用程序，其中我使用了 Drawer Navigator 并在其中嵌套了一个 Stack Navigator。抽屉包含屏幕首页、产品、简介等。 当我在主屏幕内使用堆栈导航器切换到 3 个不同的屏幕时 产品->项目描述。 问题 1：如果我通过 Home 转到 Product 或 Item Description 。如果我在 products 或 ItemDescription 中打开抽屉，我无法在从抽屉中单击 HOME 时返回主页。而单击抽屉菜单上的其他选项，我可以切换到差异屏幕。

问题 2：我有一个来自 'navbar-native' 的导航栏，我在每个组件中都使用了它，即 HOME 、 PRODUCTS 、 ItemDescription 、 Cart 等。你能帮我与 redux 链接，以便我可以在点击时打开不同的屏幕在其图标即购物车和搜索屏幕上。

抽屉代码：

 const RootDrawer = DrawerNavigator({
 Home: {
   screen: HomeScreen,
   style :{backgroundColor:'blue'},
 },
 Profile: {
   screen: ProfileScreen,
 },
 Products: {
   screen: Products,
 },
 Cart: {
   screen: Cart,
 },
});

export default RootDrawer;

主屏幕代码：

 class Home extends React.Component {

      constructor(props){
        super(props) ;
        this.openUp = this.openUp.bind(this)

      }

      openUp(){
         this.props.navigation.navigate('DrawerOpen'); 
    // open drawer passed to all components to open Drawer from hamburger 
    //iconpresent at NAVbar
       }



      render() {
            return (
                  <SimpleApp key={1} screenProps={this.openUp} />
         );
      }
    }




const SimpleApp = StackNavigator(
   {
  drwlyout: { screen: DrawerLayoutMain ,      navigationOptions:({navigation}) => ({ header: false }  )              },
  prodlyout: { screen: Products ,    navigationOptions:({navigation}) => ({ header: false })},
  itemdsclyout: { screen: ItemDescription ,    navigationOptions:({navigation}) => ({ header: false })},
  navbarlayout: { screen: NavBarComponent ,    navigationOptions:({navigation}) => ({ header: false })},


  }   );

function mapDispatchtoProps(dispatch){
   return  bindActionCreators({getDataFirebase:getDataFirebase},dispatch);
}
export default connect(null,mapDispatchtoProps)(Home);

Answer 1

对于您的第一个问题，您将需要一个导航缩减器，可以找到关于如何使用 React-Navigation 实现 Redux 的基本描述here 当您必须监听减速器内部的特定导航操作时。例如，您的 DrawerNavigator 看起来像这样：

const nav = (state = INITIAL_NAV_STATE, action) => {
let nextState;

switch (action.type) {

  case REHYDRATE:
    // if you're using redux-persist

  case 'Main': // where 'Main' is your StackNavigator
    nextState = AppNavigator.router.getStateForAction(
      NavigationActions.navigate({ routeName: 'Home' }),
      state
    );
    break;

查看主屏幕名称“routeName”。因此，您的根目录或主抽屉导航器应如下所示：

const routeConfig = {
  Main: {
    screen: MainStackNavigator,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="a006_start" size={28} color={tintColor} />
      ),
    drawerLockMode: 'locked-closed'
  }
},

.... additional Code ....
.... like navigationOptions etc. ....

const MainDrawerNavigator = DrawerNavigator(routeConfig, routeOptions);

export default MainDrawerNavigator;

很抱歉，我还没有使用“navbar-native”，但我想如果你像这样连接你的 redux 配置，你可以收听特定的导航操作。然后可以在您的导航减速器中进行处理。