基本步骤
- 安装
Node.js验证是否安装Node.jsnode -v - 安装
git -
npm instal -g nrm安装npm模块 -
npm install -g npm@2安装npm2 -
npm install -g react-native-cli安装ReactNative
如何上面几个步骤下载慢，可以先执行下面这个命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装错了，可以使用命令卸载，比如卸载ReactNative
npm -uninstall -g react-native-cli
IDE
可以使用Sublime Text 3
同时安装下面几个插件
-
Package Controlhttps://packagecontrol.io/installation
Sublime Text 3 控制台输入如下代码
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
然后重启Sublime Text 3,Ctr+Shift+P,搜索Package Control：Install package，然后继续安装
Babel-sublime
支持ES 6语法与React Native的JSX语法的高亮显示
sublimeLinter
支持对JS进行代码检测，安装完后，然后执行命令
npm install -g JSHint,然后配置sublimeLinter,
Tools -> sublimeLinter -> Open user Settings,会打开一个文件SublimeLinter.sublime-settings，复制https://segmentfault.com/a/1190000000389188里面的代码进去，里面涉及到路径修改为自己的电脑路径
JSFormat
自动格式化JS代码
- 浏览器安装
React Dev tool
初始化第一个工程
react-native init Project47
47是指ReactNative的版本,可访问https://github.com/facebook/react-native/releases查看
下载完后，可以通过命令查看
npm list >npmlist.txt
下载了哪些依赖包，这些依赖包都在当前工程的node_modules里面
然后我们可以备份下工程，以防后面需要恢复
Android运行调试
连接手机 adb devices，如果连接成功就会显示相应的设备，Android5.0以上手机需要执行下面命令才会显示
adb reverse tcp:8081 tcp:8081
执行项目到Android
react-native run-android
在以后调试应用的时候就不需要执行上面命令了，需要执行下面这条命令
react-native start
如果上面命令执行失败，可以将android工程导入AndroidStudio里面修改并执行
执行成功之后，注意打开App的悬浮窗权限，以及启动react-native start,否则会显示红屏。Android5.0以下手机需要设置本地IP
最后执行成功如下图效果
简单修改代码
在index.android.js添加代码
let Dimensions = require('Dimensions');
let PixelRatio = require('PixelRatio');
let totalWidth = Dimensions.get('window').width;
let totalHeight = Dimensions.get('window').height;
let pixelRatio = PixelRatio.get();
<Text style={styles.welcome}>
pixelRatio = {pixelRatio}
</Text>
<Text style={styles.welcome}>
totalWidth = {totalWidth}
</Text>
<Text style={styles.welcome}>
totalHeight = {totalHeight}
</Text>
最后显示如下
简单的登录页面布局
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let totalHeight = Dimensions.get('window').height;
let leftStartPoint = totalWidth *0.1;
let componentWidth = totalWidth * 0.8;
export default class Project47 extends Component {
constructor(props){
super(props);
this.state = {
inputNum:'',
inputpwd:''
}
}
render(){
return (
<View style={styles.container}>
<TextInput
style={styles.numberInputStyle}
placeholder={'请输入手机号码'}
maxLength={11}
keyboardType='numeric'
onChangeText={(inputNum) => this.setState({inputNum})}
/>
<Text style={styles.textPromptStyle}>
您输入的手机号：{this.state.inputNum}
</Text>
<TextInput
style={styles.passwordInputStyle}
secureTextEntry= {true}
onChangeText={(inputpwd) => this.setState({inputpwd})}
placeholder='请输入密码' />
<Text style={styles.bigTextPromt}>
确 定
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'white',
},
numberInputStyle:{
top:20,
left:leftStartPoint,
width:componentWidth,
backgroundColor:'white',
fontSize:20
},
textPromptStyle:{
top:30,
left:leftStartPoint,
width:componentWidth,
fontSize:20
},
passwordInputStyle:{
top:50,
left:leftStartPoint,
width:componentWidth,
backgroundColor:'white',
fontSize:20
},
bigTextPromt:{
top:70,
left:leftStartPoint,
width:componentWidth,
paddingTop:5,
paddingBottom:5,
backgroundColor:'blue',
color:'white',
textAlign:'center',
fontSize:24
}
});
AppRegistry.registerComponent('Project47', () => Project47);
常见问题
react-native不是内部或外部命令，也不是可运行的程序
或批处理文件。
nodeJS路径配置不正确,执行下面命令
npm config set prefix "E:\IDE\NodeJs\nodejs\node_global"
npm config set cache "E:\IDE\NodeJs\nodejs\node_cache"
替换上面的路径问自己的电脑配置路径，然后在电脑Path路径，配置
E:\IDE\NodeJs\nodejs\node_globalnpm ERR! Windows_NT 10.0.14393
执行命令
npm --registry http://registry.cnpmjs.org info underscore红屏问题
1，adb reverse tcp:8081 tcp:8081
2，第一次安装需执行react-native run-android
3，react-native start
