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);
你可以將上面的代碼復(fù)制黏貼到你項目中的index.ios.js 或者 index.android.js 文件中運行一下看看效果.
這是怎么一回事?
可以看到上面的代碼和JavaScript很相似,這是未來移動端的一大趨勢吧(原文大意,我表示觀望).
首先,ES2015(也就是ES6)作為JavaScript的一大標(biāo)準(zhǔn)尚未被所有的瀏覽器接受,這也是ES6還沒有應(yīng)用到web開發(fā)的原因,不過ReactNative是支持ES6的,所以不需要擔(dān)心適配問題.import, from, class, extends, 以及 () =>都是ES6的特點,如果對其不熟悉的話可以看看這里,能幫助你大致了解ES6標(biāo)準(zhǔn).(PS:網(wǎng)頁端的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);
關(guān)注這一行<Image source={pic} style={{width: 193, height: 110}}/>,這是一個Image組件,可以通過自定義它的source屬性來達(dá)到更改顯示的圖片地址的作用,另外可以看到{pic}這種寫法,這是JSX的語法,在JSX里面,可以將任何的JavaScript的表達(dá)式寫進大括號{}里面
另外你自己創(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);
看到我們給Greeting組件定義了一個屬性name,然后在LotsOfGreetings中對其進行了三次的復(fù)用,每一次都對name進行一次賦值就可以實現(xiàn)了上圖效果.
