React-Native學習筆記(一)--HelloWorld

寫在前面的話

背景相關：android開發轉react-native（簡稱RN）。隨着大前端時代的到來，RN也走進了更多開發者的視線，原生 + RN在之後也將是APP開發的大趨勢。之後原生的不會放下，RN也會繼續學習。（之前的關於原生的博客也將陸陸續續轉移到簡書，雖然沒多少東西┬─┬ ノ( ' – 'ノ)）

---

學前準備

首先須要配置環境，這裏能夠參考react-native中文網，裏面講解很是詳細，會針對所使用的電腦系統來顯示不一樣的教程。還有江清清的技術專欄一樣講解也很明白。

配置好環境後，運行第一個項目hello world

---

Hello World!

幾乎全部語言開始都是hello world，RN也不例外。
打開項目目錄

其中index.android.js就是android端的程序入口，index.ios.js就是ios端的程序入口，能夠看到官方給出兩個文件內容大致是同樣的，這也體現了一點:RN裏android和ios的代碼複用率基本在80%以上。這大大提升了開發速度。若是對語法不熟悉，建議看看阮一峯老師寫的React入門。看完後大致上應該會對RN的語言有一個概念。

如今就來修改下index.android.js來實現咱們的helloworld。

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

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </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('HelloWorld', () => HelloWorld);

這裏咱們只需修改render()方法就能夠去實現helloword（render就是渲染的意思）

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          HelloWorld!
        </Text>
      </View>
    );
}

render方法裏只返回了一個html的片斷，一個View裏包含一個Text，這就是RN裏推薦的寫法JSX。style裏設置的是界面的樣式。這裏不明白的能夠看一下html+css入門。

固然這只是一個最簡單的例子（簡直LOW爆了(╯‵□′)╯︵┻━┻），對RN裏的組件，屬性，狀態都沒有涉及，這些將會出如今下篇React-Native學習筆記中。

寫在後面的話

一些學前準備的彙總：

• 環境搭建:http://reactnative.cn/docs/0....

• 江清清的技術專欄（React Native專題）:http://www.lcode.org/react-na...

• 阮一峯的React 入門實例教程:http://www.ruanyifeng.com/blo...

• 阮一峯的《ECMAScript 6入門》:http://es6.ruanyifeng.com/ (es6瞭解便可)

也是剛開始學習RN，小半個月吧，實現了一兩個demo，以後會慢慢的將本身的學習過程寫下來，一是幫本身回顧，二是幫助一些想學習RN的朋友。

學習路漫漫，吾將上下而求索。