前言
- 新手打算從零開始學習面書的ReactNative霞溪。
- 原本打算學習Java進行Android開發(fā)孵滞，但看到ReactNative應(yīng)用開發(fā)的顛覆性，以及本身做過少量前端開發(fā)鸯匹，因此決定提前入坑坊饶。
- 環(huán)境搭建此處略過，請至官網(wǎng)了解殴蓬。
- 在次說明匿级，本人學習能力較弱，因此決定做官方文檔的搬運工染厅。
常用組件
Text 組件痘绎。用于顯示文本。
import React from 'react'; //導入react
import { AppRegistry,Text } from 'react-native'; //導入Text,在此導入組件
const App = () => {
return (
<Text>Hello World!</Text>
);
}
AppRegistry.registerComponent('MyApp', () => App); //注冊應(yīng)用之后才能正確渲染肖粮，且應(yīng)用作為整體只注冊一次
Image 組件孤页。用于顯示圖片。
import React from 'react'; //導入react
import { AppRegistry,Image} from 'react-native'; //導入Image
const App = () => {
return (
<Image source={require('./img/check.png')} /> //<image> 相當于網(wǎng)站中 <img> 標簽
);
}
AppRegistry.registerComponent('MyApp', () => App); //注冊應(yīng)用之后才能正確渲染涩馆，且應(yīng)用作為整體只注冊一次
View 組件行施≡始幔基礎(chǔ)容器。
import React from 'react'; //導入react
import { AppRegistry,View,Image} from 'react-native'; //導入Image,View
const App = () => {
return (
<View style={{alignItems:'center'}}> //<View>相當于網(wǎng)站中的 <div>標簽蛾号，因此對于其他組件應(yīng)包裝在View中來進行樣式和布局的控制
<Image source={require('./img/check.png')} /> //當前目錄稠项，<image> 相當于網(wǎng)站中 <img> 標簽
</View>
);
}
AppRegistry.registerComponent('MyApp', () => App); //注冊應(yīng)用之后才能正確渲染，且應(yīng)用作為整體只注冊一次
對于樣式布局的操作與Html非常類似鲜结。
TextInput 組件展运。用于文本輸入。
import React from 'react'; //導入react
import { AppRegistry,View,TextInput} from 'react-native'; //導入TextInput,View
const App = () => {
return (
<View>
<TextInput placeholder="Hello" /> //文本中的提示信息精刷，與Html5的<input>相同
</View>
);
}
AppRegistry.registerComponent('MyApp', () => App); //注冊應(yīng)用之后才能正確渲染拗胜，且應(yīng)用作為整體只注冊一次
ListView 組件。動態(tài)垂直滾動列表贬养。
必需屬性：
dataSource : 列表內(nèi)容的數(shù)據(jù)來源挤土。
renderRow : 需要渲染的實際內(nèi)容。
必須函數(shù)：
rowHasChanged
import React from 'react'; //導入react
import { AppRegistry,View,Text,ListView} from 'react-native'; //導入Text,View,ListView
class SimpleList extends React.Component {
//初始化數(shù)據(jù)
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); // 比較兩行數(shù)據(jù)是否是一個數(shù)據(jù)
this.state = {
dataSource: ds.cloneWithRows(['A','B','C','D','E'])
};
render() {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
AppRegistry.registerComponent('MyApp', () => App); //注冊應(yīng)用之后才能正確渲染误算，且應(yīng)用作為整體只注冊一次
語法是ES6的語法。本人沒有接觸過ES6迷殿。
