带有反应导航的屏幕条件渲染

Question

最近我一直在尝试使用react-navigation 进行导航布局。我有 4 个选项卡，它们嵌套在抽屉导航中。我有 3 个抽屉标签。我想有条件地渲染一个标签的页面，假设 Home Tab 根据活动抽屉标签。 我的代码如下：

Screens.js

import React from 'react';
import { View, Text } from 'react-native';

export const LaptopHome = () => {
    return(
      <View style={{flex: 1, backgroundColor: '#e3e3e3'}}>
        <Text>
          This is laptop Home Page.
        </Text>
      </View>
    );
}

export const CameraHome = () => {
  return(
    <View style={{flex: 1, backgroundColor: 'skyBlue'}} >
      <Text>This is Camera Home Page</Text>
    </View>
  )
}

export const MobileHome = () => {
  return(
    <View style={{flex: 1}}>
      <Text>This is a Mobile Home page</Text>
    </View>
  );
}

export const Orders = () => {
  return(
    <View style={{flex: 1}}>
      <Text>Orders history details</Text>
    </View>
  );
}

export const Profile = () => {
  return(
    <View style={{flex: 1}}>
      <Text>Profile details</Text>
    </View>
  );
}

export const Notification = () => {
  return(
    <View style={{flex: 1}}>
      <Text>List of Notification</Text>
    </View>
  );
}

Routes.js

import { StackNavigator, TabNavigator } from 'react-navigation';
import { FontAwesome } from '@expo/vector-icons';
import { LaptopHome, CameraHome, MobileHome, Orders, Profile, Notification } from './Screens';

const HomeStack = StackNavigator({
  Home: {
    screen: LaptopHome //or CameraHome or MobileHome //Render according to active drawer label.
  }
});

const OrdersStack = StackNavigator({
  Order: {
    screen: Orders,
  }
});

const ProfileStack = StackNavigator({
  Profile: {
    screen: Profile,
  }
});

const NotificationStack = StackNavigator({
  Notification: {
    screen: Notification,
  }
});

const HomeTab = TabNavigator({
  HomeTab: {
    screen: HomeStack,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => <FontAwesome name="home" size={24} color={tintColor} />,
    },
  },
  OrderTab: {
    screen: OrdersStack,
    navigationOptions: {
      tabBarLabel: 'Orders',
      tabBarIcon: ({ tintColor }) => <FontAwesome name="cart-arrow-down" size={24} color={tintColor} />
    },
  },
  ProfileTab: {
    screen: ProfileStack,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarIcon: ({ tintColor }) => <FontAwesome name="user" size={24} color={tintColor} />
    },
  },
  NotificationTab: {
    screen: NotificationStack,
    navigationOptions: {
      tabBarLabel: 'Notification',
      tabBarIcon: ({ tintColor }) => <FontAwesome name="bell" size={24} color={tintColor} />
    },
  }
}, {
initialRouteName: 'HomeTab',
tabBarPosition: 'bottom',
swipeEnabled: false,
tabBarOptions: {
  activeTintColor: '#4DD1A5',
  inactiveTintColor: '#AAADAC',
  upperCaseLabel: false,
  showIcon: true,
  style: {
    backgroundColor: '#fff',
  },
  labelStyle:{
    fontSize: 10,
    margin: 0,
  },
  indicatorStyle: {
    opacity: 0,
  },
},
});


export const AppNavigator = DrawerNavigator({
  Laptop: {
    screen: HomeTab,
    navigationOptions: {
      drawerLabel: 'Laptop',
    }
  },
  Camera: {
    screen: HomeTab,
    navigationOptions: {
      drawerLabel: 'Camera',
    }
  },
  Mobile: {
    screen: HomeTab,
    navigationOptions: {
      drawerLabel: 'Mobile',
      drawerIcon: ({ tintColor }) => (
        <MaterialCommunityIcons name="table-large" size={24} color={tintColor} />
      ),
    }
  }
}, {
  initialRouteName: 'Laptop',
  contentOptions: {
    activeTintColor: '#4DD1A5',
    inactiveTintColor: '#AAADAC',
    activeBackgroundColor: '#ffffff',
  }
});

App.js

'use strict';

import React, { Component } from 'react';
import {AppNavigator} from './Routes';

export default class App extends Component {
  render() {
    return (
        <AppNavigator />
    );
  }
}

AppRegistry.registerComponent('SimpleApp', () => App);

所以，我想根据活动抽屉标签有条件地呈现 HOME 选项卡。 我尝试通过访问反应导航的状态，但它没有帮助。有没有人解决这个问题或者我错过了什么。

Answer 1

我知道这已经有一段时间了，但我刚刚遇到了你的问题。我知道您正在使用 react-navigation，但我可以建议您使用 react-native-router-flux 替代方案。它具有其他功能以及导航。如果您有兴趣，可以访问https://github.com/aksonov/react-native-router-flux了解更多详情。但您只需按照以下步骤浏览屏幕即可。

1- 通过安装将 react-native-router-flux 库添加到您的项目中。

2- 创建一个 router.js 文件，它将托管您的主要屏幕 js 类。一个简单的例子

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';

const RouterComponent = () => {
return (
    <Router>
        {/*<Scene key="testScreen">
            <Scene key='testScene' component={RequestScreen} hideNavBar />
        </Scene>*/}
        <Scene key="loginNav">
            <Scene key="loginScreen" component={LoginForm} hideNavBar panHandlers={null} />
            <Scene direction="vertical" key="signupScreen" component={SignUp} />
    </Router>
);};export default RouterComponent;

如您所见，您正在创建一条路线，一种包含用于在它们之间导航的屏幕的地图。

3- 完成路由配置后，您可以转到要导航的任何屏幕并导入 router-flux（从该库导出操作）并调用您要导航的屏幕，如下所示；

Actions.signupScreen();

就是这样，你现在可以走了。希望这可以帮助您。快乐的编码伙伴！