React-Native:简单入门教程+环境搭建

简单的RN(React-Native)入门教程

RN(React-Native),是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域;但是对于我这种前端不是很6的人来说,就得花时间好好学习一下了。

一、rn的优点

  1. 跨平台
  2. 提高代码复用性
  3. 调试方便
  4. 支持热更新

二、rn的缺点

  1. 版本不稳定,知道目前为止都没有初版
  2. 控件在Android和iOS之间还是存在一定大的差异,不够完善
  3. 自身升级麻烦
    。。。。。。

三、介绍几个学习的官方网站
官网:https://facebook.github.io/react-native/
中文官网:http://reactnative.cn/
Github:https://github.com/facebook/react-native/
四、环境搭建

因为rn没有出过官方的版本,这里我们所做的入门练习都是基于React Native0.47版本去学习的哦!
1. nodeJS
nodeJs是开发必不可少的服务器脚本语言,这里使用的是12.14.0版本,大家可以去官网(NodeJS官网)下载相应版本即可。
开发rn,对应nodejs版本要求应该有一定限制, 版本应大于等于 12.0,一般下载最新的稳定版就可以。
2. python
python的话,一般下载2.x版本就可以,因为目前好像并不支持3.x。官网(python官网链接).
3. jdk
jdk的话,一般需要的是1.8,官网(JDK8)下载就行,但是现在都需要注册账号才可以下载哦。
4. android studio
android studio一般要求是大于2.x版本即可,这里我们使用的是2.1版本。
5. yarn
yarn版本没有特别要求,本人用的是1.15.2版本。
6. npm
npm用的是6.13.4版本。

注意:
1、不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!
2、具体安装步骤,大家也可以去看react-native官方中文网(rn.0.47);

五、开始创建rn模板项目
1、打开一个cmd窗口,输入:npm install -g yarn react-native-cli,此命令是为了保证rn能够正确运行。
2、cmd打开命令窗口,切换到一个空的目录下(尽量不要在C盘,更不要在C盘的 System32 目录中 初始化项目!)

react-native init HelloReact
cd HelloReact
react-native run-android

React-Native:简单入门教程+环境搭建_第1张图片
React-Native:简单入门教程+环境搭建_第2张图片
上面我创建的是HelloWorld的项目,因为HelloReact我已经创建过了,这里只是为了演示。
当成功的时候一般你的手机会提示你下载一个app,名叫HelloWorld,一般我们操作的都是index.js文件。
下面提供一个简单的模板index.js文件,当然要想做出牛逼的rn,需要好好学习rn语法才可以进行操作哦。

//第一部分:导入需要的包和组件
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';


//第二部分:创建组件
class HelloWord extends Component {
  render() {
    return (
      
        just red
        just bigblue
        bigblue, then red
        red, then bigblue
      
    );
  }
}

///第三部分:StyleSheet.create创建样式,这个部分只会创建一次
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

//第四部分:注册入口组件AppRegistry
AppRegistry.registerComponent('HelloReact', () => HelloReact);

上面的演示教程,我们用的都是真机,因为模拟机容易出现各种不兼容的问题,一般用真机测试,不会有太多问题,也不用下载模拟器,个人觉得还是挺方便的,如果有不会真机操作的,这里给您提供一份教程:Android手机模拟调试React Native,仅限Android哦,因为本人用的是安卓机,没有ios,不好意思!

由于本人是开发服务端,java方面的,所以对于前端只是也是最近开始入门学习,因为项目需要全栈,所以有些东西理解的还是不够透彻,若是写出有问题的语法,还请大家指教,对rn入门有问题的,可以私聊我或者留言,我会尽力去将自己所知与大伙分享!

你可能感兴趣的:(react,native)