一、前言

React-native的趨勢已經是鐵板釘釘了。。。現在開始學習吧。

二、安裝

初始化專案：

react-native init hello-rn

通過adb反向代理埠，將除錯的8081埠代理到測試機上

adb reverse tcp:8081 tcp:8081

到對應目錄下安裝apk

react-native run-android

執行專案：

react-native start

以上命令可以寫成一個bat處理檔案。

成功後的截圖為：

三、一個回退按鈕的例項

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 

 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    BackAndroid,
    ToastAndroid
} from 'react-native';

let Dimensions = require('Dimensions');
let PixelRatio = require('PixelRatio');
let totalWidth = Dimensions.get('window').width;
let totalHeight = Dimensions.get('window'
 
).height;
let pixelRatio = PixelRatio.get();

/**
 * 回退按鈕
 */
let count = 3;

export default class helloword extends Component {

    //元件掛載時呼叫
    componentDidMount() {
        BackAndroid.addEventListener('回退按鈕', function () {
            if (count >= 1) {
                ToastAndroid.show("按下回退按鈕了:"
 
 + count, ToastAndroid.SHORT);
                count--;
                return true; // 不返回
            } else {
                return false; // 返回
            }
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>
                    BackAndroid模組使用例項
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

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

以上的語法都是es6的。

componentDidMount:我們可以理解它是js的window.load()函式