[React-Native]环境配置&HelloWorld

简介: 一、前言手头有mac、有开发者证书,不想浪费资源,之前做过iOS开发,还会对移动开发表示关注,现在移动开发目前用Rect Native也是一个热潮,加上之前有web开发经验,然后就有了学习的冲动。

一、前言

手头有mac、有开发者证书,不想浪费资源,之前做过iOS开发,还会对移动开发表示关注,现在移动开发目前用Rect Native也是一个热潮,加上之前有web开发经验,然后就有了学习的冲动。Keep learning, make me happy!

二、环境配置

  1. 需要mac设备
  2. 需要Xcode6.3版本以上
  3. 安装Node.js:https://nodejs.org/download/
  4. 建议安装watchman,终端命令:brew install watchman
  5. 安装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环境配置、初始化项目、打包安装到手机,以及开发小知识
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
445 1
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
|
前端开发
react实战笔记156:HelloWorld数据2
react实战笔记156:HelloWorld数据2
67 0
react实战笔记156:HelloWorld数据2
|
前端开发
react实战笔记155:HelloWorld数据1
react实战笔记155:HelloWorld数据1
66 0
react实战笔记155:HelloWorld数据1
|
前端开发 JavaScript
#yyds干货盘点 歌谣学前端之react之第一个helloworld程序
#yyds干货盘点 歌谣学前端之react之第一个helloworld程序
116 0
|
前端开发
react笔记之第一个helloworld
react笔记之第一个helloworld
59 0
|
前端开发
react实战笔记21:HelloWorld-第一个程序-react创建
react实战笔记21:HelloWorld-第一个程序-react创建
83 0
react实战笔记21:HelloWorld-第一个程序-react创建
|
JavaScript 前端开发 数据格式
react实战笔记137:解析redux的HelloWorld
react实战笔记137:解析redux的HelloWorld
91 0
react实战笔记137:解析redux的HelloWorld
|
JavaScript 前端开发
react实战笔记20:HelloWorld-第一个程序-dom创建
react实战笔记20:HelloWorld-第一个程序-dom创建
102 0
react实战笔记20:HelloWorld-第一个程序-dom创建
|
前端开发 JavaScript
React + webpack2 环境配置
创建 dev 目录,npm init --yes 生成 package.json,确保安装 webpack webpack-dev-server 1. 安装配置 Babel 它是一个 JavaScript 编译器。
1342 0