一.Props属性：
组件创建的时候需要用不同的参数进行定制，这些定制的参数就是props（属性），可为组件内部属性，也可为外部属性。
1.Props(属性)：继承系统组件的属性（内部属性）
直接上代码学习与讲解
如下代码所示：
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一定是我们的项目名称，切记！
AppRegistry.registerComponent('MyDemo', () =>Bananas);
2.Props(属性)：自定义组件的属性学习(外部调用属性)
如下代码所示：
import React, {Component} from 'react';
// Text 和View的基本控件
// View组件常用来作为其他组件的容器，来帮助控制布局和样式。
import {AppRegistry,Text,View} from 'react-native';
// 自定义控件（接收外部传入属性，显示属性内容）
class Greeting extends Component{
render(){
return (
// this.props.name 相当于调用了Greeting自定义控件的name属性进行展示。JSX语法
<Text>Hello {this.props.name}!</Text>
);
}
}
// 使用自定义控件展示数据
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 状态：
指的是组件在其生命周期中需要用状态来标记不同的数据改变结果，这种状态就是State；
其一般用于内部更改数据所用。
需要在组件类中用constructor()方法：初始化方法来初始化组件开始的状态。
如何制作一段不停闪烁的文字？
分析props和state的使用问题：文字内容在初始化render方法中一开始就创建好了，不需要后期更改，可以用props来解决；而文字的显示和隐藏是不同的2种状态，所以需要用state来解决！
分析完毕，看具体的代码和效果如下：
如下代码所示：
import React, {Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';
class Blink extends Component {
// 初始化方法
constructor(props){
super(props);
// 初始化状态值内容，根据状态的值来决定文字是否显示
this.state ={showText:true};
// 以下2种定时器方法都可以！
// 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>
);
}
}
// 定义一个根组件
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);
其运行后的效果如下：
温馨提示：注意以上所有代码中的注册方法:
AppRegistry.registerComponent('MyDemo',() => Hello);
其中的MyDemo，一定要替换为您自己创建项目中的工程的名字！
三.学习React Native遇到的坑
1.关于编码的习惯解释：
1.1. Ctrl +C，Ctrl +V的习惯对于React Native 的头文件引入不合适！
如下代码为React Native引入头文件方式：
import React, {Component} from 'react';
import {AppRegistry,Text,View} from 'react-native';
注意:其中的Text和View，分别表示其下面的控件的引入。
实际开发过程中，如原项目引入的是Text，而实际项目中需要引入Image等，结果直接导入，就会造成新项目找不到Image的引入路径，就会报错，而且也不是特别明显！
1.2. 类似的如下：
关于写代码时什么时候为AppRegistry，什么时候为AppRegister的问题，也是不小心造成的，如下正确注册方式：
AppRegistry.registerComponent('MyDemo', () =>Bananas);
同时请注意这里的注册的2个参数的表示！
MyDemo ：一定是我们的项目名称，切记！
不然会报错如下：
Bananas：指的是注册的基本组件！
2.关于iOS平台下iOS9之后的http网络请求的安全Key的问题：
关于这里的安全Key的位置处于info.plist文件中，其类型分为以下3种情况
2.1 React Native 初始的（Xcode初始的）安全key为：
空的，哈哈！
2.2 Xcode开发中要求的文件的安全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是不一样的，而自己误认为Xcode可以开发的是与React Native的安全Key是一致的，导致了问题的拖延！最后通过网络资料解决了这个问题！
总之：React Native 开发中采用的安全Key为第2.3种的情况！
以上为自己学习和开发React Native过程中遇到的�坑，一个一个的解决了哦，愉快开启开发模式吧！
好的，后面会把React Native 的有关开发中的布局，样式以及热更新等常见策略全部分享出来哦，欢迎新手和大神吐槽，哈哈！
