02 React Native入門——Hello World

簡介

        每學一門語言，我們首先要做的第一個demo就是“Hello World”，不做對不起這門語言、對不起代碼編輯器，哈哈，廢話不多說了，這篇文章就用很少的文字來介紹下如何編寫我們的Hello World吧。

 

操作步驟

1、用我們經常用的前端代碼編輯器來打開上文中我們創建的項目“myfirstapp”，在這裏我用的是webstorm，如圖：

2、然後打開項目目錄下的App.js文件，我們修改此文件的代碼，然後在我們的虛擬移動設備上輸出Hello World。將下面的代碼拷貝替換到App.js裏：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Hello, world!</Text>
            </View>
        );
    }
}

        上述代碼如果是學習過react的夥伴們會很熟悉，它就是react的語法，熟悉的import、熟悉的export default、熟悉的JSX……

        如果沒有學習過react的夥伴也不用太擔心，我們接下來的文章也會介紹這種JSX的寫法，只要你有ES6的基礎，掌握它並不是難事。

3、代碼編寫（複製/粘貼）好之後，我們在虛擬移動設備界面連續按兩次R鍵，然後在出現的菜單界面選擇【reload】，界面就會刷新，如下：

注意：在虛擬設備屏幕連續按兩次R鍵然後選擇reload的時候屏幕可能會出現紅屏，然後報錯，這是因爲你還要在項目根目錄下打開命令行，運行命令“react-native run-android”，好了，最後我們再重新執行連續R鍵和reload操作，就可以看到運行結果啦。

 

總結

        本來這節是不打算寫的，但是覺得新學一門開發技術，不寫個Hello World感覺對不起自己，所以最後還是寫了本文。這篇文章雖然比較簡短，但是裏面關於react native程序的調試及調試中出現的問題做了一下介紹。而且通過短短的一個Hello World實例，大家可能感覺到react native開發的套路了吧，其實它和react開發套路差不多，在接下來的文章中我們詳細介紹。