React Native Mac 环境搭建

下载 Mac 版Android Studio 下载

安装 JDK 环境 

Flutter 项目实战-环境变量配置一

安装 Node.js

方式一 通过Node.js 官网下载 

下载完成后点击安装包进行安装

安装完成

通过命令查看安装的版本

node -v 

 方式二 通过ReactNative 推荐 参考

watchman安装

watchman官网  下载watchman安装包  

下载完成后放到制定的目录解压后并操作如下命令：

运行命令查看版本

watchman --version

官网推荐安装方式 参考

使用 brew install watchman 命令安装

创建新项目 参考

卸载旧的命令行工具

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

npm uninstall -g react-native-cli @react-native-community/cli

 执行如下命令创建项目 

如果发生创建项目比较慢，可以切换成淘宝镜像源。

npm config set registry=http://registry.npm.taobao.org/

ReactNative_2024_11_18 对应的工程名称 

npx @react-native-community/cli@latest init ReactNative_2024_11_18

创建工程异常

找到.npm（隐藏文件）然后删除，再执行 npx @react-native-community/cli@latest init 工程名称 创建

运行到Android平台

修改gradle镜像源 参考腾讯gradle镜像源

运行工程 参考

执行如下命令编译工程

yarn react-native run-android

 

 运行工程执行如下命令：

yarn android

调试 参考

对于 Android 设备和模拟器，您可以在终端中运行 adb shell input keyevent 82

VSCode 搭建 React Native 环境

安装 React Native Tools

 使用VsCode打开ReactNative工程

运行React Native官网Hello World

 

创建Hello World工程

创建 YourApp.tsx 文件

采用函数式组件

采用Class组件

在index.js引入YouApp.tsx文件 

 

在index.js引入HelloWorldApp.tsx文件 

 运行工程

使用 yarn start 或者 adb shell input keyevent 从新运行工程

创建ScrollViewApp.tsx文件

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const ScrollViewApp = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}

export default ScrollViewApp;

在index.js引入ScrollViewApp.tsx文件 

运行工程

使用 yarn start 或者 adb shell input keyevent 从新运行工程

 

参考

参考 React Native 环境搭建

参考 React Native 入门基础 简介

参考 React Native 调试