导航器 React Navigation

一 .react-navigation包含以下功能来帮助你创建导航器:

• StackNavigator : 一次只渲染一个页面，并提供页面之间跳转的方法。 当打开一个新的页面时，它被放置
• TabNavigator : 渲染一个选项卡，让用户可以在几个页面之间切换
• DrawerNavigator : 提供一个从屏幕左侧滑入的抽屉

二.图片与代码实现

1.StackNavigator

stackNavigator.gif

StackNavigator 实现如下：

（1）yarn add react-navigation
（2）代码：

import React , {Component} from 'react';
import {View , Text , Button } from 'react-native';
import {StackNavigator} from 'react-navigation';

//添加页面HomeScreen
//用一个navigator注册一个组件时，这个组件将会添加一个属性 navigation 。 这个属性能够控制不同页面间的跳转。
const HomeScreen=({navigation})=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Home Screen</Text>
    <Button onPress={()=>navigation.navigate('Details')} title="Go to Details" />
  </View>
)
//添加页面DetailsScreen
const DetailsScreen=()=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Detail Screen</Text>
  </View>
)
//创建navigator
const RootNavigator=StackNavigator({
  //每个key代表一个页面
  Home:{
    screen:HomeScreen,
    //为导航栏添加标题
    navigationOptions:{
      headerTitle:'Home',
    }
  },
  Details:{
    screen:DetailsScreen,
    navigationOptions:{
      headerTitle:'Details',
    },
  },

});

export default RootNavigator;

2.TabNavigator

TabNavigator 00_00_02-00_00_09.gif

TabNavigator实现如下

（1）yarn add TabNavigator , yarn add react-native-vector-icons
（2）代码：

import React , { Component } from 'react';
import {View , Text , Button ,StyleSheet} from 'react-native'
//导入TabNavigator
import {TabNavigator} from 'react-navigation'             //要先在根目录下 yarn add react-navigation
import Ionicons from 'react-native-vector-icons/Ionicons'; // 要先在根目录下 yarn add react-native-vector-icons

//创建页面HomeScreen , DetailsScreen
const HomeScreen=()=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}} >
    <Text>Home Screen</Text>

  </View>
)
const DetailsScreen=()=>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Details Screen </Text>
  </View>
)
//创建一个TabNavigator 名为RootTabs
const RootTabs=TabNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions:{
      tabBarLabel:'Home',
      //设置一个tabBarIcon,会默认在IOS上显示,如果只在android上运行，可以忽略
      tabBarIcon:({ tintColor, focused })=>(
        <IonIcons
          name={focused?'ios-person':'ios-persion-outline'}
          size={26}
          style={{color:tintColor}}
        />
      ),
    },
  },
  Details:{
    screen:DetailsScreen,
    navigationOtions:{
      tabBarLabel:'Details',
      //设置一个tabBarIcon,会默认在IOS上显示,如果只在android上运行，可以忽略
      tabBarIcon:({ tintColor, focused })=>(
        <IonIcons
          name={focused?'ios-person':'ios-persion-outline'}
          size={26}
          style={{color:tintColor}}
        />
      ),
    },
  },
});
export default RootTabs;

3.DrawerNavigator

DrawerNavigator.gif

DrawerNavigator实现如下

（1）yarn add TabNavigator , yarn add react-native-vector-icons
（2）代码：

import {View ,Text } from 'react-native';
//导入DrawerNavigator组件
import {DrawerNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

//创建页面
const HomeScreen = () =>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Home Screen</Text>
    <Text>向右拉出菜单</Text>
  </View>
)
const DetailsScreen = () =>(
  <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <Text>Details Screen</Text>
    <Text>向右拉出菜单</Text>
  </View>
)
//创建一个名为RootDrawer组件
const RootDrawer=DrawerNavigator({
  Home:{
    screen:HomeScreen,
    //给每个DrawerItem设置一个明确的标签和图标
    navigationOptions:{
      drawerLabel:'Home',
      drawerIcon:({tintColor,focused})=>(
        <Ionicons
          name={focused?'ios-person':'ios-person-outline'}
          size={20}
          style={{color:tintColor}}
        />
      ),
    },

  },
  Details:{
    screen:DetailsScreen,
    navigationOptions:{
      drawerLabel:'Detail',
      drawerIcon:({tintColor,focused})=>(
        <Ionicons
          name={focused?'ios-person':'ios-person-outline'}
          size={20}
          style={{color:tintColor}}
        />
      ),
    },
  },
})
export default RootDrawer;

三.结语

本人RN新手小白一枚，希望结识志同道合可以互相骚扰的前端朋友，最好是女生，不然我男票要吃醋，哈哈哈哈