从零搭建React Native项目_从零开始搭建一个react native应用

reat native项目搭建，跟着官网文档——搭建环境，其实不难，不过新手可能还是会有些地方，觉得难理解，所以，写个博客，希望第一次用reat native的小伙伴，可以节省点时间，快速搭建项目，跑起Hello Word

开发平台是windows，目标平台是Android，

1.安装依赖有：Node、Python2、JDK 和 Android Studio、Yarn。

这里，文档建议Node换淘宝镜像，我并没有换，但也不觉得慢，小伙伴可以试试，换了会不会快一些

然后，Python2，如果已经装了Python3，可以再装一个Python2，这两个版本是可以共存并切换使用的，可以参考：

windows下通过cmd切换python2和python3版本，至于JDK 和 Android Studio，Yarn, 直接按照官网文档下载安装，即可

2.搭建好环境，就可以创建项目了，win+R 打开命令行，进入你想要存放项目的文件路径，比如我的项目存放在G:\myProject\rn-demo，然后输入命令： npx react-native init AwesomeProject ，创建一个名为AwesomeProject的reat native项目，

如果报错yarn有问题，则需要设置一下，再重新输入命令创建，即可

报错：

解决：

完成：

3.接下来，是编译并运行reat native项目

注意，运行前需要先在andorid studio，打开安卓手机模拟器，再在命令行：yarn android，运行项目

4.写出hello word

在andorid studio 打开该项目，将App.js替换成以下代码：

App.js:

import React, { Component } from 'react';
import {StyleSheet, Text, View } from 'react-native';
 
export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text style={styles.title}>Hello, world!</Text>
          <Text style={styles.content}>你的第一个react native已经跑起来了！！</Text>
        </View>
    );
  }
}
const styles = StyleSheet.create({
  title: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  content: {
    fontSize: 20,
  },
});

 

效果：