[RN] 04 - React Navigation

 

react-navigation和react-router的對比：

• 支持的平臺：
  react-navigation： react-native
  react-router： react-native、reactjs
• 性質：
  react-navigation：靜態路由（須要在程序一處進行完整的路由配置才能使用）
  react-router：動態路由（route在須要使用的地方配置，能夠把Route當作React中的組件）

 

Ref: 從react-navigation轉react-router

 

 

 

 

目錄篇：

Ref: react-native-router-flux使用技巧（API篇）

• 通用性：在最新的V4版本中是基於react-navigation實現的，若是使用過react-native-router-flux那麼使用新版本的學習成本會低不少；

• 實用性：react-navigation雖然是官方推薦的導航庫，但其庫內部提供的，能夠直接使用的功能很簡單，有些還須要配合redux來實現須要的功能。而react-native-router-flux基於react-navigation實現其沒有提供的APIpopTo(跳回指定頁面)，refresh(刷新頁面)，replace，Modal(相似iOS從底部彈出個新頁面的效果)等經常使用到的功能，在下面的翻譯中有詳細說明；

• 更新維護：這點上我很佩服庫的做者，從V1更新到V4，從未背離做者的初衷，一直在對react-native的導航進行優化、封裝，並且最讓我佩服的一點是，做者好似將react-navigation的Issues全都翻看過，庫裏面將react-navigation可能存在或者已經存在的坑都填上了，並且實時更新。若是有時間，能夠查看一下CHANGELOG.md，裏面有着所有的更新記錄。

 

export default class App extends React.Component {
    static propTypes = {
        title: PropTypes.string,
    }
    render() {
        return (
            <Provider store={store}>
                <Root>
                    <Router>
                        <View style={styles.container}>
                            <Scene key="test"     component={Test}     title="測試頁面" />
                            <Scene key="chatlist" component={ChatList} title="消息" />
                            <Scene key="chat"     component={Chat}     title="聊天" getTitle={this.props.title} initial/>
                            <Scene key="login"    component={Login}    title="登陸" backTitle="返回聊天" />
                            <Scene key="signup"   component={Signup}   title="註冊" backTitle="返回聊天" />
                        </View>
                    </Router>
                </Root>
            </Provider>
        );
    }
}

此路由器的最重要的組件， 全部 <Scene> 組件必需要有一個惟一的 key。

父節點<Scene>不能將component做爲prop，由於它將做爲其子節點的組件。

initial

boolean

false

設置爲true後，會默認顯示該頁面

component

React.Component

semi-required

要顯示的組件，定義嵌套時不須要Scene，參見示例。

 

 

先學一學：

Ref: React Native Basics: Using react-native-router-flux

【共四篇，第三篇是tabs】

 

Ref: https://github.com/react-navigation/react-navigation

【感受有了這個就差很少了，一個不錯的庫】

 

 

代碼實踐： 

Ref: React Navigation: Stacks, Tabs, and Drawers

【質量高，有良心，有代碼】

 

 

 

 

 

側邊欄導航

---

 很是簡單的抽屜導航介紹，將來講解 react-native-router-flux 時做爲對比。

 

• 屬性介紹 

 

• 代碼分析

/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict';

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    Image,
    TouchableOpacity,
    DrawerLayoutAndroid,
    ProgressBarAndroid,
    View
} from 'react-native';


class DongFang1 extends Component {
  render() {

    var navigationView = (
        <View style={{flex: 1, backgroundColor: '#ff0'}}>
          <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>我是抽屜!</Text>
        </View>
    );

    return (
        <DrawerLayoutAndroid
            drawerWidth         = {100}
            drawerPosition      = {DrawerLayoutAndroid.positions.Right}
            renderNavigationView= {() => navigationView}
            >

          <View style={{flex: 1, alignItems: 'center'}}>
            <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
            <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>React Native World!</Text>
          </View>
        </DrawerLayoutAndroid>
    );
  }
}

const styles = StyleSheet.create({

  flex:{
    flex:1,
  },
});

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