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

上面我创建的是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 (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

///第三部分：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入门有问题的，可以私聊我或者留言，我会尽力去将自己所知与大伙分享！