react native 学习一(环境搭配和常见错误的解决)

时间:2021-05-29 08:45:58

react native 学习一(环境搭配)

首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装python2、nodejs、git、Android Studio。这里前面两个都比较好装,android studio装起来相当慢,其实应该只用装sdk就行了,安装sdk可以按http://www.androiddevtools.cn/这个里面的方式设个代理。

软件装好了,就是环境变量设置了,添加ANDROID_HOME的环境变量指到android sdk的目录下,在path里添加C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools,这个是为了使用adb命令行,可加可不加。

最后,就是创建react项目了

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
react-native run-android这里可能会遇到一点问题,最大可能就是找不到andrio sdk,报这个错
Error:A problem occurred configuring project ':app'. > failed to find Build

在sdk那个目录看下版本号是多少,\sdk\build-tools ,我的是23.0.3,但是reactnative的build.grade文件里的buildToolsVersion  是23.0.1,所以把这个值改得对应起来就行了。

好上面通过了,就起一个服务了。

react-native start

他会在本地开一个端口号为8081的http服务,http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false 打开这个地址如果能看到js代码,就说明服务启动成功了,如下图

react native 学习一(环境搭配和常见错误的解决)

再就是在模拟器上运行app了,下载一个蓝叠模拟器,里面广告有点多,慎点就行了,上面的都弄好了后,在模拟器里有一个myProject的应用,打开,这个你应该可以看到一片红色的错误代码,如下图:

react native 学习一(环境搭配和常见错误的解决)

这个时候,如果你前面的步骤都对了,那就可以点模拟器左侧的摇一摇,这个时候会出现一个菜单选择,选择最下面的dev setting,如下图

react native 学习一(环境搭配和常见错误的解决)

在这个设置里面,设置你本机的ip和端口号8081,如下图

react native 学习一(环境搭配和常见错误的解决)

然后再返回到之前的应用里,这个时候,你应该就可以看到

react native 学习一(环境搭配和常见错误的解决)

再就是改成hello,world了,修改index.android.js里的代码

class MyProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello,world.
</Text>
<Text style={styles.instructions}>
To 掌心化屎
</Text>
<Text style={styles.instructions}>
叶雨冰星 QQ群:5678537
</Text>
</View>
);
}
}

还是摇一摇,选中reload JS,就可以看到最新的效果了, 源码请点击这里:https://github.com/tianxiangbing/react-native-study

react native 学习一(环境搭配和常见错误的解决)

是不是很有成就感?我就整了一天,整出个hello world,好吧!!就这样了,明天学点别的再记录,有想一起学习react native的,可以加入Q群 77813547, 5678537