React-Native环境配置

前端之家收集整理的这篇文章主要介绍了React-Native环境配置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、基本环境配置
1、安装Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、下载node.js:brew install node

3、安装watchman,终端命令:brew install watchman

4、安装flow:brew install flow

二、创建工程

1、根路径下,安装命令行工具

sudo npm install -g react-native-cli

2、在所要生成文件的位置,创建一个叫MNAPP的空项目

react-native init MNAPP

3、按照终端提示,进入MNAPP,执行react-native run-ios

4、可以看到,好像不太顺利:

Command Failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/MNAPP.app/Info.plist
Print: Entry,":CFBundleIdentifier",Does Not Exist

5、在stack overflow和GitHub上面看到很多关于这个问题的解决方法

【第一种】

【第二种】

【第三种】

【第四种】

【结论】大概的情况有以上四种,最后用了第四种解决方式,查看版本号

https://github.com/facebook/react-native/releases

发现:version 0.41.0可以运行无错

6、重新运行:
二、2:react-native init My —version 0.41.0

7、按照终端提示,进入MNAPP,执行react-native run-ios

8、效果

9、打开index.ios.js文件,这里我选择使用WebStorm@H_301_101@打开index.ios.js文件
(1)进行修改,运行:

(2)进一步修改

(1)找到代码<Text></Text><Text style=@H_502_120@{styles.welcome}>
      Welcome to React Native!
</Text>
修改成如下:
<Text style=@H_502_120@{styles.welcome}>
      React-Native入门学习
</Text>
(2)找到代码:
welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,},修改成如下:
welcome: {
    fontSize: 20,color: 'red',

GitHub:https://github.com/Yangchengfeng/react-native-learning/tree/master/Hello_World/MNAPP

原文链接:https://www.f2er.com/react/303780.html

猜你在找的React相关文章