react native总结-3

发表于 | 分类于

react native总结-3

2020年1月5日

经过前两节的React 基本知识学习已经基本上掌握了react。现在我们进入react native相关知识的学习，react native 需要你有前端css、html、flex、js相关的知识储备。

react native 开发环境

访问一下地址搭建开发环境：https://reactnative.cn/docs/getting-started/

1
2
3
4
5
npm install -g react
npm install -g  react-native
//创建示例工程
react-native init AwesomeProject
react-native info

image.png

查看package.json文件，添加一下信息，编译对应的main.bundle

1
2
3
4
5
6
"scripts": {
    "start": "react-native start",
    "bundle-ios-release": "react-native bundle --entry-file index.js  --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle",
    "bundle-ios-debug": "react-native bundle --entry-file index.js  --platform ios --dev true --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle",
    "test": "jest"
  },
1
2
3
4
//debug 为调试使用
npm run bundle-ios-debug
//debug 为发布使用
npm run bundle-ios-release

image.png

react native 开发调试

需要注意项

  1. 调试需要在同一个局域网下
  2. 需要安装对应的react dev tools工具

其它

清华大学开源软件镜像站

mac 打出反引号`：mac 的反引号需要按住option(alt)键并且在英文状态下即可。