Question

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

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选项卡。我尝试通过访问react-navigation的状态，但它没有任何帮助。有没有人解决这个问题，或者我错过了什么。

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（）;

总而言之，你现在很高兴。希望，这可以帮助你。快乐的编码伴侣！

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

1 个答案: