react-native 基础开发二 项目结构和基础代码结构

    在react-native项目中，由于项目是同时支持android和ios，所以在项目中，会有android 和 ios的完整的项目结构，并且

可以通过android studio 和 xcode 进行打开和运行，所以我在开发的时候，是用webstorm直接打开react-native的整个项目

然后通过android studio进行打开android项目，用android studio 编译运行，在webstorm进行开发。

    以下是项目的代码的结构

   


    其中的  android 文件夹中有完整的android项目，可以用as打开，ios文件夹里面有完整的ios项目，可以用xcode打开，

ui文件夹下面是开发中js文件，index.android.js 和 index.ios.js 是入口文件

   

    以下来看下 index.android.js中的代码

    import React, { Component } from 'react';
import { AppRegistry, StyleSheet,Text,TextInput,ScrollView,Image,View} from 'react-native';

class DemoFirst extends Component {
constructor(props){ //需要设置state的初始值或者绑定事件时,使用这个方法
super(props);
this.state={text:''};
}
render(){
return (
<ScrollView>//滑动控件
<Text style={styles.red}>第一行的数字</Text>//显示数据控件
<Image source={require('./img/ic_on_pass.png')}></Image>//显示图片控件，其中的 require() 方法是获取本地图片
<Image source={require('./img/ic_pass.png')}></Image>
<Text style={styles.bigblue}>第二行的数字</Text>
<Image source={require('./img/icon_002_cover.png')}></Image>
<Image source={require('./img/icon_002_cover.png')}></Image>
<Text style={[styles.bigblue,styles.red]}>第三行的数字</Text>
<Image source={require('./img/icon_010_cover.png')}></Image>
<Image source={require('./img/icon_010_cover.png')}></Image>
</ScrollView>
);
}
}

const styles= StyleSheet.create({//创建样式
bigblue:{
color:'blue',
fontWeight:'bold',
fontSize:30,
},
red:{
color:'red',
},
});

// 注意，这里用引号括起来的'DemoFirst'必须和你init创建的项目名一致
AppRegistry.registerComponent('DemoFirst', () => DemoFirst);

    这是一个简单的带有滑动效果的几张图和几行字
    在react-native开发中，会新建很多个新的组件（Component），所以新建的组件都是要继承（Component）

    以下的这句，只在index.android.js 中存在,其他新建的组件不需要用到这句

AppRegistry.registerComponent('DemoFirst', () => DemoFirst);

   

    在android开发中有生命周期的概念，相当于原有的方法的调用顺序，以下是组件的生命周期

    实例化

getDefaultProps

组件类型首次实例化时初始化默认props属性，多实例共享

getInitialState

实例化时初始化默认state属性

componentWillMount

在渲染之前触发一次

render

渲染函数，返回DOM结构

componentDidMount

在渲染之后触发一次

    有需要重新渲染（props变更或者setState改变state时）

componentWillReceiveProps

组件接收到新的props时调用，并将其作为参数nextProps使用，可在此更改组件state

shouldComponentUpdate

判断是否需要更新组件（在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用）

componentWillUpdate

更新渲染前调用

render

渲染函数，返回DOM结构

componentDidUpdate

更新渲染后调用

    销毁

componentWillUnmount

组件移除之前调用