react-native 基础开发二 项目结构和基础代码结构
来源:互联网 发布:js tip 编辑:程序博客网 时间:2024/06/10 23:11
在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使用,可在此更改组件stateshouldComponentUpdate
判断是否需要更新组件(在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用)componentWillUpdate
更新渲染前调用render
渲染函数,返回DOM结构componentDidUpdate
更新渲染后调用
销毁
componentWillUnmount
组件移除之前调用
1 0
- react-native 基础开发二 项目结构和基础代码结构
- React Native项目结构
- [React-Native]初识代码结构
- RN(react native)入坑指南-06,项目开发结构(代码分层组织)
- [React Native混合开发]React Native for iOS之代码结构
- 【React Native】React基础(二)
- Java基础系列二、代码结构+函数
- React Native项目组织结构介绍
- react-native之项目结构分析
- React Native基础与入门(二)--初识React Native
- React-Native基础_1.初识React-Native项目
- react-native 目录结构
- react-native 基础入门
- React Native基础组件
- React Native入门基础
- React Native基础
- React-native基础介绍
- React-native基础操作
- 打开MacOS中的显示应用窗口预览的功能
- PLSQL工具使用技巧
- Nodejs Express Ajax跨域请求
- Android系统内置应用更新被还原
- iOS 页面之间的传值方式
- react-native 基础开发二 项目结构和基础代码结构
- C++模板实现二叉查找树(四 广度优先遍历)
- windows关于mysql忘记密码的情况下更改密码
- 20170401 oracle format code appears twice
- [图像]摄像机标定(1) 标定中的四个坐标系
- LeetCode 344. Reverse String
- ACM 素数求和问题 (Java)
- linux命令——文件目录操作
- adb无法使用,提示error: unknown host service的解决办法