原文地址1,
原文地址2,本文為原文不完全翻譯

Hello World

所有的程序皆由Hello World開始,下面是 Hello World 的代碼

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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

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

Paste_Image.png

你可以將上面的代碼復制黏貼到你項目中的index.ios.js 或者 index.android.js 文件中運行一下看看效果.

這是怎么一回事?

可以看到上面的代碼和JavaScript很相似,這是未來移動端的一大趨勢吧(原文大意,我表示觀望).
首先,ES2015(也就是ES6)作為JavaScript的一大標準尚未被所有的瀏覽器接受,這也是ES6還沒有應用到web開發(fā)的原因,不過ReactNative是支持ES6的,所以不需要擔心適配問題.import, from, class, extends, 以及 () =>都是ES6的特點,如果對其不熟悉的話可以看看這里,能幫助你大致了解ES6標準.(PS:網頁端的RN代碼編寫器)

屬性

大部分的組件(Component)都可以對其進行自定義屬性的,看看下面的例子:

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}
AppRegistry.registerComponent('Bananas', () => Bananas);

關注這一行<Image source={pic} style={{width: 193, height: 110}}/>,這是一個Image組件,可以通過自定義它的source屬性來達到更改顯示的圖片地址的作用,另外可以看到{pic}這種寫法,這是JSX的語法,在JSX里面,可以將任何的JavaScript的表達式寫進大括號{}里面

另外你自己創(chuàng)建的component也是可以使用屬性props的,并且使用this.props進行訪問,看看下面這個例子:

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

Paste_Image.png

看到我們給Greeting組件定義了一個屬性name,然后在LotsOfGreetings中對其進行了三次的復用,每一次都對name進行一次賦值就可以實現了上圖效果.