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 组件移除之前调用

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!