从零搭建React Native项目

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

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

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

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

从零搭建React Native项目_第1张图片

然后,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有问题,则需要设置一下,再重新输入命令创建,即可

从零搭建React Native项目_第2张图片

报错:

从零搭建React Native项目_第3张图片

解决:

从零搭建React Native项目_第4张图片

完成:

从零搭建React Native项目_第5张图片

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

注意,运行前需要先在andorid studio,打开安卓手机模拟器,再在命令行:yarn android,运行项目从零搭建React Native项目_第6张图片

从零搭建React Native项目_第7张图片

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 (
        
          Hello, world!
          你的第一个react native已经跑起来了!!
        
    );
  }
}
const styles = StyleSheet.create({
  title: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  content: {
    fontSize: 20,
  },
});

 

效果:

从零搭建React Native项目_第8张图片

你可能感兴趣的:(前端)