說明
本文是作者 Lefe 所創(chuàng)定躏，轉(zhuǎn)載請注明出處痒留，如果你在閱讀的時候發(fā)現(xiàn)問題歡迎一起討論。本文會不斷更新听哭。
React Native相信大家都不陌生慢洋，多多少少會聽到它的傳聞。最近由于公司在做電商項目欢唾，遇到很多需要及時處理的問題且警，比如某個商品需要打折，某個商品需要促銷礁遣，對于那些多變的界面斑芜，使用H5做，用戶體驗比較差祟霍。為了滿足這一需求杏头，來研究下RN。 React Native 中文網(wǎng)
環(huán)境搭建
這個比較簡單沸呐，由于以前學(xué)習Node很多環(huán)境配置過醇王，在配置RN的時候沒有花費太多的時間。不過遇到一個問題就是在執(zhí)行 react-native init AwesomeProject的時候如果你沒有更改NPM源的話崭添，它會一直卡著寓娩，所以建議更換NPM源，淘寶源.
基礎(chǔ)
學(xué)習RN的時候，其實直接看 官方文檔 比較靠譜棘伴，這樣會讓你少走一些彎路寞埠，以免被別人帶到別處，如果看不懂英文焊夸，沒關(guān)系這里還有 中文版 仁连。基礎(chǔ)部分主要建設(shè)了一下幾部分：
- Prpos(屬性):可以給組件添加自定義的屬性阱穗，當然也可以使用組件自帶的屬性
import React, { Component } from 'react';
import {
AppRegistry,
View,
Image,
Text,
StyleSheet
} from 'react-native';
class Greeting extends Component {
render() {
return (
// 使用 this.props 獲取屬性的組件的屬性
<Text> Name: {this.props.name}, address: {this.props.address}!</Text>
);
}
}
class ImageComponent extends Component {
render() {
let pic = {
url: 'http://www.7xsm.net/upload/img/59/5977EE1CE18AB4CCAF6A616A50147B03.jpg'
};
return (
// source style 為Image自帶的屬性
<Image source = {pic} style = {{width: 300, height: 300}} />
);
}
}
class AwesomeProject extends Component {
render() {
return (
<View style={{alignItems: 'center', marginTop: 64}}>
<Greeting name = 'WSY' address = 'BeiJing'/>
<Greeting name = 'Lefe' address = 'XingHe'/>
<Greeting name = 'BX' address = 'HuShi'/>
<ImageComponent />
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
- State(狀態(tài)):
import React, { Component } from 'react';
import {
AppRegistry,
View,
Text,
StyleSheet
} from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
setInterval( () => {
this.setState({showText: !this.state.showText});
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class AwesomeProject extends Component {
render() {
return(
<View style={{marginTop: 64}}>
<Blink text = 'I am lefe, an iOS developer. Welocome to React Native' />
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
- Height and Width(寬饭冬、高):
flex動態(tài)縮放 - Styles(樣式表): 添加多個樣式表的時候使用
[]
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
size: {
width: 300,
height: 400
},
flexStyle: {
flex: 1
}
});
class AwesomeProject extends Component {
render(){
return (
<View style={styles.flexStyle}>
<Text style={styles.bigblue}>I am lefe, an iOS developer</Text>
<Text style={[styles.bigblue, styles.size]}>I am lefe, an iOS developer</Text>
</View>
);
};
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
- Layout with Flexbox:
- Handing Text Input:
- Using a ScrollView:
- Using a ListView:
- Networking:
- Using navigators:
===== 我是有底線的 ======
喜歡我的文章，歡迎關(guān)注我的新浪微博 Lefe_x揪阶，我會不定期的分享一些開發(fā)技巧
