react-native配置及创建helloworld工程遇到的问题

本文详细介绍了配置React-Native环境的过程,包括必备软件如Node.js、Python2、React-Native CLI和Android Studio的安装。在创建项目时,强调了设置npm镜像或使用代理的重要性,以避免创建过程中的延迟或失败。特别指出Android SDK Build-Tools必须为23.0.1版本。在创建工程时可能会遇到长时间等待的情况,这是正常现象。遇到解压gradle错误时,需确保完整下载gradle压缩包。此外,解决Win10系统与虚拟机冲突问题,成功在模拟器上运行项目。

1、必须下载的软件


nodejs  python2  react-native-cli  android studio


2、安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。


npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

这个也是很重要的,如果不给npm设置代理可能创建工程时会很久没有反应,或者还会创建失败


3、Android SDK Build-Tools 23.0.1。(必须是这个版本)


因为他创建的工程指定使用这个版本的,所有必须要有


4、创建工程真的是一个比较耗时的事情,需要等。

创建过程中会出现这样的情况,到466就卡住了的感觉,这是正常的,需要耐心的等待



这个地方也是正常的,那个小圆点会一点点的慢慢加,等待。。。。。。。



我等待了很久之后好像是报了一个什么错误,但是当时也没有注意就退出了,然后再次运行react-native run-android就变成了下面这样



这个错误我真的是百度了好久好久,几乎上面的每一句话我都拿去百度过,最后功夫不负有心人,总算是找到了问题所在



图中圈住的地方表示解压gradle-2.4-all.zip,然后下面就说error了,因为当初打那个小圆点的时候还没打完然后就报错退出了,导致这个压缩包没下载完,所有现在解压会有错,然后在网上下载了完整的压缩包,再运行就成功了!


当初一直是在真机上运行,还以为真机有什么错,结果吧模拟器也下载好了,然后以为Win10的系统跟virtuabox有仇,老是提示不能运行,卸载重装了好几遍,后来把前几天下的净网大师给删了,然后就成功运行了!


下载前可以先看下教程 https://pan.quark.cn/s/16a53f4bd595 小天才电话手表刷机教程 — 基础篇 我们将为您简单的介绍小天才电话手表新机型的简单刷机以及玩法,如adb工具的使用,magisk的刷入等等。 我们会确保您看完此教程后能够对Android系统有一个最基本的认识,以及能够成功通过magisk root您的手表,并安装您需要的第三方软件。 ADB Android Debug Bridge,简称,在android developer的adb文档中是这么描述它的: 是一种多功能命令行工具,可让您与设备进行通信。 该命令有助于各种设备操作,例如安装和调试应用程序。 提供对 Unix shell 的访问,您可以使用它在设备上运行各种命令。 它是一个客户端-服务器程序。 这听起来有些难以理解,因为您也没有必要去理解它,如果您对本文中的任何关键名词产生疑惑或兴趣,您都可以在搜索引擎中去搜索它,当然,我们会对其进行简单的解释:是一款在命令行中运行的,用于对Android设备进行调试的工具,并拥有比一般用户以及程序更高的权限,所以,我们可以使用它对Android设备进行最基本的调试操作。 而在小天才电话手表上启用它,您只需要这么做: - 打开拨号盘; - 输入; - 点按打开adb调试选项。 其次是电脑上的Android SDK Platform-Tools的安装,此工具是 Android SDK 的组件。 它包括与 Android 平台交互的工具,主要由和构成,如果您接触过Android开发,必然会使用到它,因为它包含在Android Studio等IDE中,当然,您可以独立下载,在下方选择对应的版本即可: - Download SDK Platform...
### 创建 React Native iOS 项目并实现 Hello World 功能 要创建一个 React Native 的 iOS 项目,可以按照以下方法操作: #### 初始化 React Native 项目 通过 `npx` 或全局安装的 `react-native-cli` 工具来初始化一个新的 React Native 应用程序。运行以下命令会生成一个基础的 React Native 项目结构[^1]。 ```bash npx react-native init HelloWorldApp ``` 此命令会在当前目录下创建一个名为 `HelloWorldApp` 的新文件夹,并设置好必要的依赖项以及配置文件。如果成功执行该命令,则可以在项目的根目录找到类似于以下的文件夹结构: - **ios/**: 包含 Xcode 项目文件和其他 iOS 特定资源。 - **android/**: 包含 Android Studio 项目文件及其他 Android 特定资源(本案例仅关注 iOS 部分)。 - **App.js**: 主应用程序入口文件,默认情况下已包含一些基本代码用于展示欢迎界面。 - **package.json**: 定义了 npm/yarn 所需的包及其版本信息。 进入刚刚创建好的项目路径: ```bash cd HelloWorldApp ``` #### 修改 App.js 文件以显示 “Hello, world!” 文字 打开位于项目根目录下的 `App.js` 文件,在默认模板基础上替换为如下内容即可完成自定义文字渲染需求: ```javascript import React from 'react'; import { Text, View } from 'react-native'; const App = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello, world!</Text> </View> ); }; export default App; ``` 上述代码片段中引入了两个核心组件 `<View>` 和 `<Text>` 来构建简单的 UI 布局。其中 `<View>` 是容器类视图负责管理子元素布局属性;而 `<Text>` 则专门用来呈现纯文本字符串给用户查看。 #### 启动 Metro Bundler 并加载应用到模拟器/真机设备上 确保已经安装 Apple Developer Tools (XCode),因为它是编译调试 iOS 应用所必需的基础环境工具集之一。接着输入下面这条指令启动开发服务器同时自动尝试连接至本地物理手机或者虚拟仿真器实例之上: ```bash npx react-native run-ios ``` 当一切正常运作之后,您应该能够在屏幕中央看到我们之前设定好的那句问候语:“Hello, world!” --- ### 可能遇到的问题及解决办法 在某些特定场景下可能会触发警告提示关于未实现的方法接口问题,比如当我们利用 constantsToExport 属性或者是针对 UIKit 组件重写了 init 函数的时候就会弹出这样的消息提醒开发者注意补充缺失部分逻辑代码[^3]。不过对于初学者来说暂时无需过多担心这些细节方面的东西,随着学习深入自然能够逐步掌握处理技巧。 另外值得注意的是目前最新版 React Profiler 支持多种类型的操作码记录性能数据其中包括但不限于 mount 渲染树节点初次挂载过程 render 更新现有 DOM 结构 update 实现动态变化追踪等功能特性[^2]。尽管如此它们并不直接影响到这里讨论的主题范围之内因此不必特别纠结于此概念层面的知识点理解程度高低与否。 最后附赠一段励志短文激励大家勇敢面对困难挑战自我极限不断进步成长壮大成为更优秀的程序员吧[^4]!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值