React Native Mac 环境搭建

下载 Mac 版Android Studio 下载

安装 JDK 环境 

   Flutter 项目实战-环境变量设置一
  安装 Node.js

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

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

安装完成

通过下令检察安装的版本

1. node -v

复制代码

 方式二 通过ReactNative 保举 参考

watchman安装

watchman官网  下载watchman安装包  

下载完成后放到订定的目次解压后并操纵如下下令：

运行下令检察版本

1. watchman --version

复制代码

官网保举安装方式 参考

利用 brew install watchman 下令安装

创建新项目 参考

卸载旧的下令行工具

   如果你之前全局安装过旧的react-native-cli下令行工具，请利用npm uninstall -g react-native-cli卸载掉它以克制一些辩说：

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

复制代码

 实行如下下令创建项目 

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

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

复制代码

ReactNative_2024_11_18 对应的工程名称 

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

复制代码

创建工程非常

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

运行到Android平台

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

运行工程 参考

实行如下下令编译工程

1. yarn react-native run-android

复制代码

 

 运行工程实行如下下令：

1. 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文件

1. import React from 'react';
2. import { View, Text, Image, ScrollView, TextInput } from 'react-native';
4. const ScrollViewApp = () => {
5.   return (
6.     <ScrollView>
7.       <Text>Some text</Text>
8.       <View>
9.         <Text>Some more text</Text>
10.         <Image
11.           source={{
12.             uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
13.           }}
14.           style={{ width: 200, height: 200 }}
15.         />
16.       </View>
17.       <TextInput
18.         style={{
19.           height: 40,
20.           borderColor: 'gray',
21.           borderWidth: 1
22.         }}
23.         defaultValue="You can type in me"
24.       />
25.     </ScrollView>
26.   );
27. }
29. export default ScrollViewApp;

复制代码

在index.js引入ScrollViewApp.tsx文件 

运行工程

   利用 yarn start 大概 adb shell input keyevent 重新运行工程
   

参考

参考 React Native 环境搭建
参考 React Native 入门根本 简介
参考 React Native 调试

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金