ReactNative进阶 ：导航组件 react-navigation_react native导航栏组件

在React Native中，我们可以使用react-navigation库来实现导航功能。这个库提供了两个主要的导航组件：StackNavigator和TabNavigator。

以下是一个简单的例子，展示如何使用StackNavigator和TabNavigator：

import { StackNavigator, TabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
 
// 定义StackNavigator
const AppStackNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: '主页',
    },
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      title: '个人资料',
    },
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
      title: '设置',
    },
  },
});
 
// 定义TabNavigator
const AppTabNavigator = TabNavigator({
  Home: {
    screen: AppStackNavigator,
    navigationOptions: {
      tabBarLabel: '主页',
      tabBarIcon: ({ tintColor }) => <Icon name='home' type='font-awesome' color={tintColor} />,
    },
  },
  Notifications: {
    screen: NotificationsScreen,
    navigationOptions: {
      tabBarLabel: '通知',
      tabBarIcon: ({ tintColor }) => <Icon name='bell' type='font-awesome' color={tintColor} />,
    },
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
      tabBarLabel: '设置',
      tabBarIcon: ({ tintColor }) => <Icon name='cog' type='font-awesome' color={tintColor} />,
    },
  },
}, {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});
 
export default AppTabNavigator;

在这个例子中，我们首先定义了一个StackNavigator，用于处理应用内部的导航。然后我们定义了一个TabNavigator，在底部标签栏中添加了指向StackNavigator和两个屏幕NotificationsScreen和SettingsScreen的链接，同时使用了react-native-elements中的Icon组件来显示图标。最后，我们将AppTabNavigator作为应用的根导航器导出。