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