react-navigation實現(xiàn)頁面框架

初始化一個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，在項目根目錄執(zhí)行一下命令

yarn add react-navigation

現(xiàn)在的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"
    }
}

創(chuàng)建項目結(jié)構(gòu)

1. 在根目錄創(chuàng)建src文件夾
2. 在src文件夾下創(chuàng)建root.js
3. 在src文件夾下創(chuàng)建Screens文件夾
4. 在Screens文件夾創(chuàng)建以下文件:home.js/Nearby.js/Message.js/Profile.js/SignIn.js/SignUp.js
5. 在src文件夾下創(chuàng)建styles文件夾
6. 在styles文件夾創(chuàng)建CommonStyles.js文件
7. 在styles文件夾創(chuàng)建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內(nèi)容

引用react-navigation庫

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

定義TabNavigator

Tab中定義了4個Tab頁，分別是Home, Nearyby, Message, Profile
screen: 后邊跟的是component name, navigationOptions是設(shè)置tab的參數(shù)羞延。

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頁面跳轉(zhuǎn)到主頁（Tab頁）

在render中拿到navigation上下文帮坚，使用this.props.navigation.navigate()方法跳轉(zhuǎn)到相應頁面，參數(shù)為注冊到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;