react-navigation实现页面框架

初始化一个RN项目

react-native init page_framework

page.json

{
    "name": "page_framework",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-alpha.12",
        "react-native": "0.47.1"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.12"
    },
    "jest": {
        "preset": "react-native"
    }
}

引入react-navigation，在项目根目录执行一下命令

yarn add react-navigation

现在的page.json

{
    "name": "page_framework",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-alpha.12",
        "react-native": "0.47.1",
        "react-navigation": "^1.0.0-beta.11"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.12"
    },
    "jest": {
        "preset": "react-native"
    }
}

创建项目结构

1. 在根目录创建src文件夹
2. 在src文件夹下创建root.js
3. 在src文件夹下创建Screens文件夹
4. 在Screens文件夹创建以下文件:home.js/Nearby.js/Message.js/Profile.js/SignIn.js/SignUp.js
5. 在src文件夹下创建styles文件夹
6. 在styles文件夹创建CommonStyles.js文件
7. 在styles文件夹创建index.js文件

修改index.ios.js文件，以component的形式引用Root

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import Root from "./src/root"

export default class page_framework extends Component {
  render() {
    return (
        <Root />
    );
  }
}


AppRegistry.registerComponent('page_framework', () => page_framework);

修改root.js内容

引用react-navigation库

 import { StackNavigator, TabNavigator } from 'react-navigation';

定义TabNavigator

Tab中定义了4个Tab页，分别是Home, Nearyby, Message, Profile
screen: 后边跟的是component name, navigationOptions是设置tab的参数。

const Tab = TabNavigator(
    {
        Home:{
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: 'Home',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require("./resource/icons/pfb_tabbar_homepage.png")}
                        style={[{tintColor: tintColor}, styles.icon]}
                    />
                ),
            }),
        },
        Nearby:{
            screen: Nearby,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: 'Nearby',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require("./resource/icons/pfb_tabbar_merchant.png")}
                        style={[{tintColor: tintColor}, styles.icon]}
                    />
                ),
            }),
        },
        Message:{
            screen: Message,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: 'Message',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require("./resource/icons/pfb_tabbar_discover.png")}
                        style={[{tintColor: tintColor}, styles.icon]}
                    />
                ),
            }),
        },
        Profile:{
            screen: Profile,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: 'Profile',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require("./resource/icons/pfb_tabbar_mine.png")}
                        style={[{tintColor: tintColor}, styles.icon]}
                    />
                ),
            }),
        },
    },
    {
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        animationEnabled: true,
        lazy: true,
    },
);

定义StackNavigator

整个app由3个页面组成：Tab，SignIn，SignUp。
应用默认打开SignIn页面,
以上页面全部注册到StackNavigator中。

const Navigator = StackNavigator(
    {
        SignIn: { screen: SignIn },
        SignUp: { screen: SignUp },
        Tab: { screen: Tab },
    },
    {
        navigationOptions: {
            headerBackTitle: null,
            headerTintColor: '#333333',
        },
    },
);

在root中使用Navigator

class Root extends Component{

    render(){
        return (
            <Navigator />
        );
    }
}

在SignIn页面跳转到主页（Tab页）

在render中拿到navigation上下文，使用this.props.navigation.navigate()方法跳转到相应页面，参数为注册到StackNavigator中的页面，这里使用Tab。

import React, { PureComponent } from 'react';
import {
    View,
    Text,
    Button,
} from 'react-native';
import { CommonStyles } from "../styles/";

class SignIn extends PureComponent{
    static navigationOptions = {
        header: null,
    };
    render(){
        return(
            <View style={CommonStyles.container}>
                <Text style={CommonStyles.welcome}>
                    this is SignIn page!
                </Text>
                <Text style={CommonStyles.instructions}>
                    this is SignIn page!
                </Text>
                <Text style={CommonStyles.instructions}>
                    this is SignIn page!
                </Text>
                <Button title="登录" onPress={() =>
                    this.props.navigation.navigate('Tab')}
                />
                <Button title="注册" onPress={() =>
                    this.props.navigation.navigate('SignUp')}
                />
            </View>
        );
    }
}

export default SignIn;