反应导航 4 - JavaScript

反应导航 4 是一个基于 React 框架的 JavaScript 库，用于构建用户界面。 它提供了一种声明式的方法来创建可复用的组件，并使组件在数据发生变化时进行高效地更新。

安装

你可以通过 npm 安装反应导航 4。

npm install react-navigation@^4.0.0

例子

让我们使用一个简单的例子来演示反应导航 4。

我们要创建一个带有选项卡的导航栏，每个选项卡都有一个不同的屏幕。

我们将需要以下组件：

• createBottomTabNavigator: 用于创建底部选项卡导航器
• createStackNavigator: 用于创建堆栈导航器
• TabBarIcon: 用于添加选项卡图标

首先，我们需要导入这些组件：

import * as React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import Icon from 'react-native-vector-icons/FontAwesome';

接下来，我们将创建两个屏幕组件 HomeScreen 和 ProfileScreen。

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Profile Screen</Text>
      </View>
    );
  }
}

然后我们将创建一个堆栈导航器，其将包含两个屏幕组件。

const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
    },
  },
});

const ProfileStack = createStackNavigator({
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      title: 'Profile',
    },
  },
});

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" size={22} color={tintColor} />
      ),
    },
  },
  Profile: {
    screen: ProfileStack,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarIcon: ({ tintColor }) => (
        <Icon name="user" size={22} color={tintColor} />
      ),
    },
  },
}, {
  initialRouteName: 'Home',
  tabBarOptions: {
    activeTintColor: 'red',
    inactiveTintColor: 'gray',
  },
});

最后，我们将导出选项卡导航栏。

export default createAppContainer(TabNavigator);

结论

反应导航 4 提供了强大的导航功能，可帮助我们构建高效的用户界面。 它使用了声明式语法，使代码易于阅读和维护。 由于 React 库在 WEB、iOS 和 Android 系统下都有较好的支持，因此你可以使用同一份代码来构建多个平台的应用程序。