一.Props屬性：
組件創(chuàng)建的時(shí)候需要用不同的參數(shù)進(jìn)行定制框产，這些定制的參數(shù)就是props（屬性）蜡娶，可為組件內(nèi)部屬性磅废，也可為外部屬性锅棕。
1.Props(屬性)：繼承系統(tǒng)組件的屬性（內(nèi)部屬性）
直接上代碼學(xué)習(xí)與講解
如下代碼所示：
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 (
// 這里的source和style就是Image組件的屬性
<Image source={pic} style ={{width:193,height:110}} />
);
}
}
// 注意：這里的MyDemo一定是我們的項(xiàng)目名稱(chēng)拙泽，切記！
AppRegistry.registerComponent('MyDemo', () =>Bananas);
2.Props(屬性)：自定義組件的屬性學(xué)習(xí)(外部調(diào)用屬性)
如下代碼所示：
import React, {Component} from 'react';
// Text 和View的基本控件
// View組件常用來(lái)作為其他組件的容器哲戚，來(lái)幫助控制布局和樣式奔滑。
import {AppRegistry,Text,View} from 'react-native';
// 自定義控件（接收外部傳入屬性艾岂，顯示屬性?xún)?nèi)容）
class Greeting extends Component{
render(){
return (
// this.props.name 相當(dāng)于調(diào)用了Greeting自定義控件的name屬性進(jìn)行展示顺少。JSX語(yǔ)法
<Text>Hello {this.props.name}!</Text>
);
}
}
// 使用自定義控件展示數(shù)據(jù)
class LotsOfGreetings extends Component {
render(){
return(
<View style={{alignItems:'center'}}>
<Greeting name='zhangsan'/>
<Greeting name='lisi'/>
<Greeting name='wangwu'/>
</View>
);
}
}
AppRegistry.registerComponent('MyDemo',() =>LotsOfGreetings);
二.State 狀態(tài)：
指的是組件在其生命周期中需要用狀態(tài)來(lái)標(biāo)記不同的數(shù)據(jù)改變結(jié)果，這種狀態(tài)就是State王浴；
其一般用于內(nèi)部更改數(shù)據(jù)所用脆炎。
需要在組件類(lèi)中用constructor()方法：初始化方法來(lái)初始化組件開(kāi)始的狀態(tài)。
如何制作一段不停閃爍的文字氓辣？
分析props和state的使用問(wèn)題：文字內(nèi)容在初始化render方法中一開(kāi)始就創(chuàng)建好了秒裕，不需要后期更改，可以用props來(lái)解決钞啸；而文字的顯示和隱藏是不同的2種狀態(tài)几蜻，所以需要用state來(lái)解決！
分析完畢体斩，看具體的代碼和效果如下：
如下代碼所示：
import React, {Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';
class Blink extends Component {
// 初始化方法
constructor(props){
super(props);
// 初始化狀態(tài)值內(nèi)容梭稚，根據(jù)狀態(tài)的值來(lái)決定文字是否顯示
this.state ={showText:true};
// 以下2種定時(shí)器方法都可以！
// setInterval(() => {
// this.setState(previousState => {
// return { showText: !previousState.showText };
// });
// }, 1000);
setInterval((() => {this.setState({showText:!this.state.showText});}),1000);
}
render(){
let display =this.state.showText?this.props.name:' ';
return(
<Text>{display}</Text>
);
}
}
// 定義一個(gè)根組件
class Hello extends Component {
render(){
return(
<View style ={{alignItems:'center'}}>
<Blink name ='Hello Word!'/>
<Blink name ='Hello Boss!'/>
<Blink name ='Hello Student!'/>
</View>
);
}
}
AppRegistry.registerComponent('MyDemo',() => Hello);
其運(yùn)行后的效果如下：
溫馨提示：注意以上所有代碼中的注冊(cè)方法:
AppRegistry.registerComponent('MyDemo',() => Hello);
其中的MyDemo絮吵，一定要替換為您自己創(chuàng)建項(xiàng)目中的工程的名字弧烤！
三.學(xué)習(xí)React Native遇到的坑
1.關(guān)于編碼的習(xí)慣解釋?zhuān)?/p>
1.1. Ctrl +C，Ctrl +V的習(xí)慣對(duì)于React Native 的頭文件引入不合適蹬敲！
如下代碼為React Native引入頭文件方式：
import React, {Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';
注意:其中的Text和View暇昂，分別表示其下面的控件的引入莺戒。
實(shí)際開(kāi)發(fā)過(guò)程中，如原項(xiàng)目引入的是Text急波，而實(shí)際項(xiàng)目中需要引入Image等从铲，結(jié)果直接導(dǎo)入，就會(huì)造成新項(xiàng)目找不到Image的引入路徑幔崖，就會(huì)報(bào)錯(cuò)食店，而且也不是特別明顯！
1.2. 類(lèi)似的如下：
關(guān)于寫(xiě)代碼時(shí)什么時(shí)候?yàn)锳ppRegistry赏寇，什么時(shí)候?yàn)锳ppRegister的問(wèn)題吉嫩，也是不小心造成的，如下正確注冊(cè)方式：
AppRegistry.registerComponent('MyDemo', () =>Bananas);
同時(shí)請(qǐng)注意這里的注冊(cè)的2個(gè)參數(shù)的表示嗅定！
MyDemo ：一定是我們的項(xiàng)目名稱(chēng)自娩，切記！
不然會(huì)報(bào)錯(cuò)如下：
Bananas：指的是注冊(cè)的基本組件渠退！
2.關(guān)于iOS平臺(tái)下iOS9之后的http網(wǎng)絡(luò)請(qǐng)求的安全Key的問(wèn)題：
關(guān)于這里的安全Key的位置處于info.plist文件中忙迁，其類(lèi)型分為以下3種情況
2.1 React Native 初始的（Xcode初始的）安全key為：
空的，哈哈碎乃！
2.2 Xcode開(kāi)發(fā)中要求的文件的安全Key為：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
2.3 React Native 更改后可用的（Xcode初始的）安全key為：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>api.xxx.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
可以看出姊扔，以上三者的安全key是不一樣的，而自己誤認(rèn)為Xcode可以開(kāi)發(fā)的是與React Native的安全Key是一致的梅誓，導(dǎo)致了問(wèn)題的拖延恰梢！最后通過(guò)網(wǎng)絡(luò)資料解決了這個(gè)問(wèn)題！
總之：React Native 開(kāi)發(fā)中采用的安全Key為第2.3種的情況梗掰！
以上為自己學(xué)習(xí)和開(kāi)發(fā)React Native過(guò)程中遇到的?坑嵌言，一個(gè)一個(gè)的解決了哦，愉快開(kāi)啟開(kāi)發(fā)模式吧及穗！
好的摧茴，后面會(huì)把React Native 的有關(guān)開(kāi)發(fā)中的布局，樣式以及熱更新等常見(jiàn)策略全部分享出來(lái)哦埂陆，歡迎新手和大神吐槽苛白，哈哈！
