（1）基本的語法結(jié)構(gòu)
// 第一部分：引入組件
import React, { Component } from 'react',
import {
AppRegistry,
StyleSheet,
View,
Text
} from 'react-native'；
// 第二部部分：通過class xxxx extends Component { render() { return () } };（構(gòu)造器）
// 通過新建組件來做類似于html結(jié)構(gòu)的內(nèi)容或颊，只能有一個<View>,所有的內(nèi)容都必須放在<view>中
export default class b extends Component {
render() {
return (
<View style={ styles.aa}>
<Text style={styles.bb}>文字文字</Text>
</View>
);
}
}
//第三部分：樣式，相當(dāng)于css
const styles = StyleSheet.create({
aa: { backgrounColor: red }
bb: { }
});
//第四部分：
AppRegistry.registerComponent( 'b', () => b );
(2)組件的生命周期
(1)組件的初始化，渲染，裝載完成奸披。
(2)組件運(yùn)行時(shí)的狀態(tài)（往往是用戶第一眼看到的狀態(tài)）
(3)組件卸載
RN組件的生命周期
- 生命周期小應(yīng)用：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class bb extends Component {
constructor(props) {
super(props)
this.state = { time: 0 }
}
timesPlus() {
let times = this.state.time;
times++;
this.setState({ time: times });
}
componentWillMount() {
console.log("組件即將安裝-componentWillMount");
}
componentDidMount() {
console.log("組件安裝后-componentDidMount");
}
//在componentWillMount和componentDidMount之間會執(zhí)行render的console.log
shouldComponentUpdate() {
console.log("shouldComponentUpdate");
return true;
}
componentWillUpdate() {
console.log("componentWillUpdate");
}
//在componentWillUpdate和componentDidUpdate之間會執(zhí)行render的console.log
// 這里需要點(diǎn)擊才會實(shí)現(xiàn)
componentDidUpdate() {
console.log("componentDidUpdate");
}
render() {
console.log("render");
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.timesPlus.bind(this)}>
你點(diǎn)擊我試試
</Text>
<Text style={styles.instructions}>
你點(diǎn)我 { this.state.time } 多少次了
</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('bb', () => bb);
效果圖：
點(diǎn)擊實(shí)現(xiàn)數(shù)字+1
測試結(jié)果
(3) Props(屬性)
- 我們可以把任意合法的JavaScript表達(dá)式通過括號嵌入到JSX語句中谦秧。
- View組件 常用作其他組件的容器，來幫助控制布局和樣式慨代。
- 在組件中通過 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> //通過this.props.(屬性名) 來得到name屬性
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' /> //調(diào)用Greeting組件
<Greeting name='Jaina' /> //調(diào)用Greeting組件
<Greeting name='Valeera' /> //調(diào)用Greeting組件
</View>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
(4) State(狀態(tài))
- 你需要在 constructor 中初始化 state 啸如，然后在需要修改時(shí)調(diào)用 setState 方法侍匙。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) { //在constructor中初始化state
super(props); ) //這一句不能省略，照抄即可
this.state = { showText: true };
// 每1000毫秒對showText狀態(tài)做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根據(jù)當(dāng)前showText的值決定是否顯示text內(nèi)容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
