一、开端
按照react-native的教程配置好开发环境后只要执行以下步骤,即可创建第一个react native的hello world工程
1. 打开命令窗口,在你想要保存工程的位置执行: react-native init CameraProject
2. 创建好工程后,先删除react-deep-force-update/.babelrc,这是因为React Native升级了babel6,babel6对babelrc文件的解析有变更,而其他第三方组件还没有跟上这个变化,如果没有删除,运行的时候就会提示客户端无法下载js bundle。
3. 终端上执行:react-native run-android,另外打开一个终端,切换到工程目录下,执行:react-native start
4. 编译安装后即可在客户端看到react-native hello world的界面。(注意android5.0以下的需要配置dev setting 的主机端server ip&port,android 5.0以上的机器可以执行adb reverse tcp:8081 tcp:8081使用USB代替wifi 网络)
二、开发工具
webstorm + android studio
其中webstorm可以编辑管理JS代码,android studio开发native的module,但是要注意,android studio open project的时候只要指向CameraProject/android路径,不可直接import 整个CameraProject,否则可能导致整个工程坏掉。
三、工程架构初步认识
以下是react-native的hello world 工程
1.android&ios目录下放的是native的工程文件;
2.node_modules目录放的是react-native官方的组件库,或者以后在我们开发过程中根据具体需求自定义的native组件库都可以放到这个目录下,以后再详细说如何自定义native组件及如何添加到工程里。
3.index.android.js与index.ios.js分别为android和ios js代码入口,下面小弟初略解析一下index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict' ;
import React , {
AppRegistry ,
Component ,
StyleSheet ,
Text ,
View
} from 'react-native' ; //中括号内分别标明了将会使用react-native 库里的哪些组件,这里的功能相当于java的import和C的#include
class CameraPorject extends Component {
render() { //渲染函数,画面需要显示什么将由这里决定
return (
<View style ={styles. container} > //定义最大的那个显示容器的格式为container
<Text style ={styles. welcome} > //定义第一行字的格式及内容,以下类推
Welcome to React Native!
</Text>
<Text style ={styles. instructions} >
To get started, edit index.ios.js
</Text>
<Text style ={styles. instructions} >
Press Cmd+R to reload,{ ' \n '}
Cmd+D or shake for dev menu
</Text>
</View>
) ;
}
}
const styles = StyleSheet. create({
container: {
flex: 1 , //flex 布局,类似于android xml里面的weight属性
justifyContent: 'center' , //上下居中
alignItems: 'center' , //左右居中
backgroundColor: '#F5FCFF' , //背景颜色
} ,
welcome: {
fontSize: 20 ,
textAlign: 'center' ,
margin: 10 ,
} ,
instructions: {
textAlign: 'center' ,
color: '#333333' ,
marginBottom: 5 ,
} ,
}) ;
AppRegistry. registerComponent( 'CameraPorject' , () => CameraPorject) ; //注册CameraProject组件
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict' ;
import React , {
AppRegistry ,
Component ,
StyleSheet ,
Text ,
View
} from 'react-native' ; //中括号内分别标明了将会使用react-native 库里的哪些组件,这里的功能相当于java的import和C的#include
class CameraPorject extends Component {
render() { //渲染函数,画面需要显示什么将由这里决定
return (
<View style ={styles. container} > //定义最大的那个显示容器的格式为container
<Text style ={styles. welcome} > //定义第一行字的格式及内容,以下类推
Welcome to React Native!
</Text>
<Text style ={styles. instructions} >
To get started, edit index.ios.js
</Text>
<Text style ={styles. instructions} >
Press Cmd+R to reload,{ ' \n '}
Cmd+D or shake for dev menu
</Text>
</View>
) ;
}
}
const styles = StyleSheet. create({
container: {
flex: 1 , //flex 布局,类似于android xml里面的weight属性
justifyContent: 'center' , //上下居中
alignItems: 'center' , //左右居中
backgroundColor: '#F5FCFF' , //背景颜色
} ,
welcome: {
fontSize: 20 ,
textAlign: 'center' ,
margin: 10 ,
} ,
instructions: {
textAlign: 'center' ,
color: '#333333' ,
marginBottom: 5 ,
} ,
}) ;
AppRegistry. registerComponent( 'CameraPorject' , () => CameraPorject) ; //注册CameraProject组件