[React-Native]环境配置amp;HelloWorld
一、前言
手头有mac、有开发者证书,不想浪费资源,之前做过iOS开发,还会对移动开发表示关注,现在移动开发目前用Rect Native也是一个热潮,加上之前有web开发经验,然后就有了学习的冲动。Keep learning, make me happy!
二、环境配置
- 需要mac设备
- 需要Xcode6.3版本以上
- 安装Node.js:https://nodejs.org/download/
- 建议安装watchman,终端命令:brew install watchman
- 安装flow:brew install flow
三、Hello,React-Native
现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:
打开终端,开始React-Native开发的旅程吧。
1. 安装命令行:sudo npm install -g react-native-cli
2. 创建HelloWorld项目:react-native init HelloWorld
3. 找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
4. 在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
5. 启动完成你应该会看到运行效果
四、初识HelloWorld工程
Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹,找到index.ios.js文件。
index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识,修改一
些文本,下一篇会解读里面的代码。用文本编辑器打开index.ios.js文件。
(1)找到代码部分:
<Text style={styles.welcome}>Welcome to React Native!
</Text>
修改成
<Text style={styles.welcome}>React-Native入门学习
</Text>
(2)修改welcome标签的样式
welcome: {fontSize: 20,textAlign: 'center',margin: 10,
},
修改成:
welcome: {fontSize: 20,textAlign: 'center',margin: 10,color: 'red',
},
(3)如果有前端开发经验这些应该很容易理解,然后重新运行看效果
五、理解怎么运行到js脚本里面的
恭喜你
如果不搞懂上面这一个原理,参考学习官网的话你会发现第一个例子你就跑不起来,然后就会郁闷了。
六、运行官网的一个HelloWorld案例
在上面的基础上,我们来学习官网的案例。我们通过命令创建出来的HelloWorld有点复杂,我们可以删除重新写一个简单的HelloWorld开始。
参考官网第一篇教程
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';class HelloWorldApp extends Component {render() {return (<Text>Hello world!</Text>);}
}AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
如果你只是复制到index.ios.js文件中会出现报错,因为程序启动的时候找不到这个文件中的注册的HelloWorldApp类
修改:
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
然后cmmand+d重新Reload即可,不需要重启应用,这也意味着React Native开发应用可以热更新
提示:隐藏状态栏
这里我们没有设置文本都位置,默认就是在左上角,会跟状态栏重叠,我们可以隐藏状态栏即可
运行效果
七、真机调试
网上好多文章讲述如何iOS真机调试,但都有问题,编译会报错,后来发现可能是版本不一致,我用的是目前最新版本0.40,
(1)修改Signing
(2)修改IP
真机运行效果:
[React-Native]环境配置amp;HelloWorld相关推荐
- React Native 环境配置
搭建环境笔记记录: 搭建开发环境 安装node, watchman brew install node brew install watchman 复制代码 设置镜像加速 npm config set ...
- 史上最详细Windows版本搭建安装React Native环境配置
说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...
- Mac M1 搭建 React Native 环境
Mac M1 搭建 React Native 环境 环境安装 可以参考对照官方文档,本文针对M1芯片目前未完全适配情况下的方案,算是临时解决方案,不具有时效性. 你需要自行准备的依赖:Xcode &g ...
- 逻辑性最强的React Native环境搭建与调试
ReactNative系列文章: 1.<逻辑性最强的React Native环境搭建与调试> 2.<ReactNative开发工具有这一篇足矣> 正文 React Native ...
- React Native 环境搭建步骤
之前一直用RN写APP,但是真正对于RN的安装以及环境配置缺不太了解.相当于站在巨人的肩膀.这次,研究RN的同事离职,所以这块儿就必须要接手.从新搭建了一次环境.在此记录一下. 一.RN环境搭建的必须 ...
- 《Electron 开发》 环境配置和Helloworld
前言: 最近因为要帮别人做一个Mac和Windows平台下都使用的桌面应用,功能很简单,就是一个文本编辑器,所以大致了解了一下跨平台桌面应用开发的框架,知乎上推荐多半是 Electron 和 NW.j ...
- React Native 环境搭建
搭建开发环境 在React Native官网 https://reactnative.cn/docs/environment-setup 网址上有两种环境,一种完整原生环境,所谓原生环境, RN之所以 ...
- webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新
工具准备: SDK Android SDK Build-tools:23.0.1 SDK Platform:Android N .6.0 .5.1.1.5.0.1.4.4.2.4.1.2 Androi ...
- Blackberry Windows+ eclipse环境配置及Helloworld
公司同事Frank前段时间发了一个blackberry开发的链接,自己就下载了插件和模拟器玩玩. 还没看相关资料,就照着别人搭了个环境写了个helloworld. 1. 下载并解压缩eclipse ( ...
- React Native项目配置路由和选项卡导航__React Navigation的使用
React Native 配置路由 在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...
最新文章
- C++智能指针:unique_ptr详解
- 一份火爆国外的PyCharm快捷键和Python代码速查表
- 太形象了!本科、硕士、博士,有什么本质区别?
- 使用微软的 ilasm 和 ildasm 对. net程序进行编译和反编译
- Android允许应用程序使用Http明文网络传输
- Attention和增强RNN (Attention and Augmented Recurrent Neural Networks)
- .net pdf转图片_图片转PDF怎么转?推荐两种图片转PDF方法
- eclipse3.4 SVN插件安装
- 计算机网络实验arp协议分析,计算机网络ARP地址协议解析实验报告
- 为支持nginx高并发而修改的一些Linux内核参数
- charrnn 诗歌_代码不是诗歌,它只是代码
- 概率论与数理统计学习笔记——第四十三讲——两个正态总体的抽样分布
- Linux 服务器部署 vue(SPA) 与 nuxt(SSR)项目
- [强化学习一]隐马尔可夫基本概念
- cass光标大小怎么调_CAD如何调整十字光标和靶框大小
- gnuplot小功能
- 新课改计算机论文,新课改论文
- 中国电信5G技术缩略语
- find xargs
- 30天入门 Android 开发, Google 与你一起圆梦
热门文章
- atitit.atiHtmlUi web组件化方案与规范v1
- Atitit.biz业务系统 面向框架 面向模式---------数据映射imp
- Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践
- paip.c++ gui 库HtmLayout 的优缺点 QT优点
- paip.输入法编程---增加码表类型
- PAIP HTML的调试与分析工具
- 图解Linux下如何搭建C#开发环境
- mysql5.7下载镜像_docker重新打包MySQL5.7镜像
- 【优化算法】白鲨优化算法(WSO)【含Matlab源码 623期】
- 【手写数字识别】基于matlab GUI BP神经网络手写数字识别系统【含Matlab源码 1639期】