react-native 配合 react-navigation 入门demo

前置条件：

1. 安装好react-native，通过 react-native init xxxproject
2. 再react-native run-android运行
3. 安装好react-navigation相关可以看官网的文档。

文件目录：

其中几个Page页面都只是页面对应字改了一下而已。

 

AppNavigator.js

import { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';

import WelcomePage from '../pages/WelcomePage'
import DetailPage from '../pages/DetailPage'
import HomePage from '../pages/HomePage'

const MainNavigator = createStackNavigator({
  HomePage: {
    screen:HomePage,
    navigationOptions: {
      header: null
    }
  },
  DetailPage: {
    screen:DetailPage
  }
});
const InitNavigator = createStackNavigator({
   WelcomePage: {
    screen:WelcomePage,
    navigationOptions: {
      header: null
    }
  }
});

export default createAppContainer(createSwitchNavigator(
  {
    Init: InitNavigator,
    Main: MainNavigator,
  },
  {
    initialRouteName: 'Init',
  }
));

SwitchNavigator 的用途是一次只显示一个页面。 默认情况下，它不处理返回操作。我们可以通过它做一个一开始初始化欢迎页面，以及后续展示页面。

header:可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null

 

welcomePage.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View}