原文链接：http://blog.csdn.net/qq_22329521/article/details/60143983
Props属性和State属性
--
Props官方解释：大多数组件在创建的时候可以使用各种参数来进行定制，用于定制的的这些参数就是Prop
Props也可用来做界面传递的数据
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
在下面的这段代码中 this.props是没有的但是却在LotsOfGreetings 传递进去，作为一个属性
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
通过Navigator来进行跳转
render() {
return (
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MyScene
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
);
render(){
return(
<Text>{this.props.name}</Text>
);
}
在二级界面也需要跳转 ,可以通过当前的props来获取
const {navigator} = this.props;
Props的特点有一个特点是单向传递，父类有的属性可以传递给子类
State状态
一般是数据或者状态存在里面
render() {
if (!this.state.loaded){
return this.renderLoadingView();
}
return <ListView
dataSource={this.state.dataSource}
renderRow={this.rederMovie}
style={styles.listView}
/>;
}
//在界面渲染的时候 根据状态中的某个值来处理，当前的业务场景是如果未加载显示加载中的图，加载完成显示加载成功后的图
//在初始化中设置他的状态是false
constructor(props){
super(props);
this.state={
loaded:false,
};
this.fetchData=this.fetchData.bind(this);
}
//这是Rn生命周期的一个回调在render方法后，组件加载成功后执行
componentDidMount(){
//网络请求
this.fetchData();
}
//网络请求成功，修改loaded状态
fetchData(){
fetch(REQUEST_URL)
.then((response)=>response.json())
.then((responseData)=>{
this.setState({
loaded:true,
});
});
Rn中State状态的修改会修改视图，和Android不同不需要handler等操作通知视图修改，但是并不会重新渲染所以视图，会修改新的state和之前的state存在差异的视图
Rn给人的感觉
还是和前端类似的，StyleSheet.create给人CSS的感觉，render 中返回的<\View>和div类似，在flex等都和前端系统，通过js来决定他的行为
Rn热更新的方式（个人理解）
在init的Android项目的MainApplication中，存在一个ReactNativeHost 的createReactInstanceManager方法， getJSBundle 拿到要给文件路径然后之后就是他内部的实现，可能是debug版的缘故在debug包下没有assets的目录，所以可能是需要在设备dev setting中设置本地的一个ip路径来获取load 一个文件，在release包下存在一个assets的目录，如果热更新可以动态修改这个目录下的文件或者是，在MainApplication编写 getJSBundle等修改获取文件的路径的方式，在这里面大多数的资源 代码都是编写在js目录文件下，所以在和传统dex更新不同，也没有资源很难更新的痛点
几个坑
- 在项目init之后，用webStorm打开项目，从外部看结构是正常的，在启动react-native run-android 之后出现下面的问题
可能的原因是 （<font color='red'>当前环境的Windows,可能Android环境变量没配置好，在打开Android目录发现少了基本配置文件</font>，解决方法是用AS打开react-natvie下的目录下的Android项目，让studio 配置好项目文件，在重新运行rn项目，就成功了
- 在界面传递的过程中，<font color='red'>主要传递的参数名字，可能因为这个不同，造成莫名其妙的问题</font>