RN导航

首先需要导入（项目文件运行终端(终端不行的话，就用cmd黑窗口））：

yarn add react-navigation

顶部导航栏代码（简易版）：

import React, { Component } from "react";
import { createTabNavigator } from "react-navigation";
import Good from "./Good";
import Share from "./Share";
import Aks from "./Aks";

//生成的路由都是一个RN组件
const TabNav = createTabNavigator({
  Good: Good,
  Share: Share,
  Aks: Aks
});

export default class DingBu extends Component {
  render() {
    return <TabNav />;
  }
}

添加标题：

Share: {
      screen: Share,
      navigationOptions: {
        title: "分享" //设置中文标题
      }

切换导航栏位置：

const TabNav = createTabNavigator(
  {
   
  },
  // 配置切换条位置
  {
    tabBarPosition: "top"//换位bottom是位于下面
  }
);

底部导航栏：

import React, { Component } from "react";
import { createBottomTabNavigator } from "react-navigation";
import Good from "./Good";
import Share from "./Share";
import Aks from "./Aks";

//生成的路由都是一个RN组件
const BottomNav = createBottomTabNavigator({
  Good: Good,
  Share: Share,
  Aks: Aks
});

export default class DIBU extends Component {
  render() {
    return <BottomNav />;
  }
}

添加图片：

const BottomNav = createBottomTabNavigator(
  {
  
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "TopTabNav") {
          //切换不同的图标
          iconName = "ios-document";
        } else if (routeName === "Publish") {
          iconName = "ios-create";
        } else if (routeName === "My") {
          iconName = "ios-person";
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);

export default BottomNav;

跳转导航：（也叫堆栈导航）：
堆栈导航页：

import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import LIst from "./LIst";
import Detail from "./Detail";

//生成的路由都是一个RN组件
const StackNav = createStackNavigator({
  LIst: LIst,
  Detail: Detail
});

export default class DuiZhan extends Component {
  render() {
    return <StackNav />;
  }
}

list页面：

import React, { Component } from "react";
import { View, Text, Button, StyleSheet } from "react-native";

export default class LIst extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
        <Text> 列表页 </Text>
        <Button
          title="跳转到详情页"
          onPress={() => {
            // 路由传参
            this.props.navigation.navigate("Detail");
          }}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

接着是登录导航：（登录导航跟堆栈导航的区别是，不能返回）

import React, { Component } from "react";
import { createSwitchNavigator } from "react-navigation";
import Detail from "./Detail";
import Login from "./Login";

//生成的路由都是一个RN组件
const SwitchNav = createSwitchNavigator({
  Detail: Detail,
  Login: Login
});

export default class Denglu extends Component {
  render() {
    return <SwitchNav />;
  }
}