ReactNative開發(二)之基礎與入門
一、初識React Native的元件
什麼是React Native的元件？
React元件讓你將UI分割成獨立的、可重用的一些碎片或者部分，這些部分都是相互獨立的
建立元件的三種方式
ES6建立元件的方式
ES5建立元件的方式
函式式定義的無狀態元件這裡我們主要還是學習下ES6的相關知識點
二、專案的執行及編寫
首先我們在命令列中新建了一個ReactNative專案，不清楚請看ReactNative開發(一)，我這裡考慮到框架的原因，選擇的WebStorm開發工具，整合框架的話，這個工具還是比較實用，我們來看看目錄結構
說實話，第一眼覺得這跟Androidstudio的目錄結構簡直如出一轍，為了同時在Android和ios中同步效果，這裡新建一個js檔案，這裡取名為setup，將android.js的檔案內容複製過來，並且按如下編寫:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Hello from "./Hello";
export default class setup extends Component {
render() {
return (
<View style={styles.container}>
<Hello/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1 這裡修改類名為setup,Component 為元件， render()是渲染介面的必須的方法，不可缺少，並且刪除了AppRegistry引用，然後把Android和ios的js檔案修改引用這個setup.js檔案，如下：
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import setup from "./setup";
AppRegistry.registerComponent('AwesomeProject', () => setup);再次執行專案，開啟Terminal命令列，執行沒錯的話就修改成功，我們來新建一個js檔案顯示內容，這裡取名為hello.js檔案，內容如下:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
export default class Hello extends Component{
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>我的第一個react native程式</Text>
}
}執行專案，即可看到Text內容的顯示了
三、React Native元件生命週期
元件的生命週期分成三個狀態，這裡就不細說每個生命週期了，如下
Mouting---已經插入真是DOM
Updating---正在被重新渲染
Unmouting---已經一處真實DOM四、匯入和匯出
這裡我們來看下三個匯入和匯出
類的匯入和匯出
變數常量的匯入和匯出
方法的匯入匯出類的匯入和匯出
//匯出
export default class setup extends Component
//匯入
import Hello from "./Hello";變數常量的匯入和匯出
//這裡變數常量沒有匯出的寫法，看怎麼定義
var name='dddd';
var age='22';
//匯入
import Hello, {name,age} from "./Hello";方法的匯入匯出
//匯出
export function sum(a,b) {
return a+b;
}
//匯入
import Hello, {sum} from "./Hello";
//下面我們看看怎麼引用
export default class setup extends Component {
constructor(props){
super(props);
this.state=({
result:''
})
}
render() {
return (
<View style={styles.container}>
<Hello/>
<Text style={{fontSize:20}}>名字:{name}</Text>
<Text style={{fontSize:20}}
onPress={()=>{
var result=sum(2,3);
this.setState({result:result,})
}}
>2+3={this.state.result}</Text>
</View>
);
}
}四、props的使用
對於props的理解，我覺得是頁面傳遞屬性的作用，將屬性和變數通過props傳遞給元件，元件在自己對應的類中可以獲取屬性值，但是這些屬性值是不可改變的，舉例如下：
//在主介面這裡呼叫的Hello元件，傳遞age到元件中去
render() {
return (
<View style={styles.container}>
<Hello
age='22'
/>
</View>
);
}
//在Hello元件中呼叫age，如果沒有傳遞，那麼在defaultProps使用預設值
static defaultProps={
name:'小明',
age:23
}
static propTypes={
name:PropTypes.string,
}
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.props.age}</Text>
}這裡的defaultProps裡面是初始化這個元件的預設值，如果沒有收到傳遞的值，那麼就使用預設值，propTypes則是對這些屬性的型別的規範，如果傳遞的不對，那麼將給出提示，如果要新增規範，那麼需要引用這個類PropTypes
import React, { Component ,PropTypes} from 'react';下面來看看ES6中傳遞變數的便捷之處，如果這個params中有很多屬性，那麼一個個的傳遞自然不是好的解決方式，這裡便使用{…params}的方式傳遞所有屬性；
render() {
var params={name:'aaa',age:18,sex:'男'};
return (
<View style={styles.container}>
<Hello
{...params}
/>
</View>
);
}還有一種方式傳遞，獲取部分params的屬性，然後在通過name={name}的形式傳遞
render() {
var params={name:'aaa',age:18,sex:'男'};
var {name,age}=params;
return (
<View style={styles.container}>
<Hello
name={name}
age={age}
/>
</View>
);
}五、State的使用
對於state的理解，其實相當於我們java中定義變數的意思，有兩種方式去定義state中的變數，首先來看一下第一種，在constructor中定義，然後通過this.state.size呼叫
constructor(props){
super(props);
this.state={
size:80
}
}
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.state.size}</Text>
}第二種，在constructor外部呼叫
state={
size:80
}
constructor(props){
super(props);
}
render(){
return <Text style={{fontSize:20,backgroundColor:'red'}}>name={this.state.size}</Text>
}下面我們來看下怎麼改變設定變數，注意使用View記得匯入，呼叫setState方法在裡面改變size的大小
state={
size:80
}
constructor(props){
super(props);
}
render(){
return <View>
<Text
style={{fontSize:20,backgroundColor:'blue'}}
onPress={()=>{
this.setState({
size:this.state.size+10
})
}}
>吹哦啊</Text>
<Text
style={{fontSize:20,backgroundColor:'green'}}
>我的氣泡={this.state.size}</Text>
</View>
}
六、ref的使用
ref是元件的一種特殊屬性，是元件渲染後，指向元件的一個引用；通俗來說，相當於可以拿到這個元件的引用，元件中的變數，可以通過ref獲取，我們看下如何使用ref，有幾種方式定義ref，這裡說其中一種 ref=”reftest”，然後通過this.refs.reftest獲取到該元件的引用，然後呼叫getsize方法獲取四則的值
render() {
return (
<View style={styles.container}>
<Text
onPress={()=>{
var size = this.refs.reftest.getSize();
this.setState({
size:size,
})
}}
>
獲取大小:{this.state.size}
</Text>
<Hello
ref="reftest"
/>
</View>
);
}
//=================================================
//元件的渲染，這裡提供getSize方法給外部呼叫
render(){
return <View>
<Text
style={{fontSize:20,backgroundColor:'blue'}}
onPress={()=>{
this.setState({
size:this.state.size+10
})
}}
>吹哦啊</Text>
<Text
style={{fontSize:20,backgroundColor:'green'}}
>我的氣泡</Text>
</View>
}
getSize(){
return this.state.size;
}七、類的使用
這裡類的使用跟java類似，有繼承和重寫，下面我們來看看一個例子，這裡同樣也是有構造方法，
export default class Student{
constructor(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
getDescription(){
return '姓名'+this.name+'性別'+this.sex+'年齡'+this.age;
}
}
==================================
//在另一個類中初始化
constructor(props){
super(props);
this.stu = new Student('老石','男',28);
}
//呼叫，this.stu這裡已經表示Student的引用
this.stu.getDescription()我們來看看這裡類的繼承
import Student from "./Student";
export default class MyStudent extends Student{
//呼叫父類建構函式
constructor(){
super('小明','女',25);
}
//重寫父類的方法
getDescription(){
return '我的'+super.getDescription();
}
}