首页 > 其他分享 >React nativve 混合开发移动端应用环境搭建

React nativve 混合开发移动端应用环境搭建

时间:2024-01-22 17:15:51浏览次数:22  
标签:maven aliyun repository url nativve React https com 应用环境

安装软件清单:

Android Studio 版本:
Android Studio Giraffe | 2022.3.1 Patch 3

下载地址:https://developer.android.google.cn/studio/archive

JDK 版本 : JDK 17

下载地址: https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

node 版本:18.17.1
下载地址:https://nodejs.org/download/release/


react native 移动端开发环境搭建:
https://reactnative.cn/docs/environment-setup

gradle 版本:8.0
下载地址:https://mirrors.cloud.tencent.com/gradle/gradle-0.8-all.zip

下载并安装配置环境变量,不在赘述.
注意: android studio 、jdk、node、版本之间必须兼容

环境搭建过程中遇到的问题:

1. android studio 加载并安装gradle超时问题.

找到C:/用户名/.gradle 文件中添加init.gradle ,内容如下:

buildscript {

    repositories {
        maven {
            url 'https://maven.aliyun.com/repository/central'
        }
        maven {
            url 'https://maven.aliyun.com/repository/public'
        }
        maven {
            url 'https://maven.aliyun.com/repository/google'
        }
        maven {
            url 'https://maven.aliyun.com/repository/gradle-plugin'
        }
        maven {
            url 'https://maven.aliyun.com/repository/spring'
        }
        maven {
            url 'https://maven.aliyun.com/repository/spring-plugin'
        }
        maven {
            url 'https://maven.aliyun.com/repository/grails-core'
        }
        maven {
            url 'https://maven.aliyun.com/repository/apache-snapshots'
        }

    }

}

allprojects {
    repositories {
        maven {
            url 'https://maven.aliyun.com/repository/central'
        }
        maven {
            url 'https://maven.aliyun.com/repository/public'
        }
        maven {
            url 'https://maven.aliyun.com/repository/google'
        }
        maven {
            url 'https://maven.aliyun.com/repository/gradle-plugin'
        }
        maven {
            url 'https://maven.aliyun.com/repository/spring'
        }
        maven {
            url 'https://maven.aliyun.com/repository/spring-plugin'
        }
        maven {
            url 'https://maven.aliyun.com/repository/grails-core'
        }
        maven {
            url 'https://maven.aliyun.com/repository/apache-snapshots'
        }

    }
}

 

2. 执行命令:npx react-native doctor 检查环境搭建是否正常.

$ npx react-native doctor
- Running diagnostics...
Common
 ✓ Node.js - Required to execute JavaScript code
 ✓ npm - Required to install NPM dependencies
 ● Metro - Metro Bundler is not running

Android
 ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.
 ✓ JDK - Required to compile Java code
 ✖ Android Studio - Required for building and installing your app on Android
 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation
 ✓ Gradlew - Build tool required for Android builds
 ✓ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 34.0.0

注:其他错误可以忽略,adb 没有配置

执行命令:npx react-native run-android   使用android 模拟器进行编译并安装

 

 环境搭建完毕.

标签:maven,aliyun,repository,url,nativve,React,https,com,应用环境
From: https://www.cnblogs.com/Eillot/p/17980474

相关文章

  • React Native性能优化指南
    摘要本文将介绍在ReactNative开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等。通过代码案例演示和详细说明,帮助开发者更好地理解和解决ReactNative中......
  • React问题自问自答
    React学习❓:问题1、实现通过一个异步的接口,接口返回结果之前你需要加载进度,接口返回结果了你需要立马进行终止,success/fail,3s内没接收到接口结果,则一直卡着99,成功则do,不成功则nodo......
  • 【教程】React-Native代码规范与加固详解
    引言ReactNative是一种跨平台的移动应用开发框架,由Facebook推出。它可以让我们使用JavaScript和React语法编写原生应用,大大提高了移动应用的开发效率。但是,对于开发人员来说,代码规范和安全性也是非常重要的问题。本篇博客将为大家详细介绍ReactNative的代码规范和加固......
  • React(千锋)
    目录React18新增特性一.React18介绍1.新的项目创建2.老的项目升级二.RenderAPI三.自动批量更新State1.setTimeout2.promise3.原生事件4.flushSync四.ConcurrentMode(并发模式)1.useTransition2.useDeferredValue五.严格模式(mutedcolors)六.Suspense组件的变化1.版本......
  • 探索Web开发的未来——使用KendoReact服务器组件
    KendoUI是带有jQuery、Angular、React和Vue库的JavaScriptUI组件的最终集合,无论选择哪种JavaScript框架,都可以快速构建高性能响应式Web应用程序。通过可自定义的UI组件,KendoUI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容......
  • loading改用react hooks
    //子组件importReact,{useState,useEffect}from'react';import{Modal}from'antd';constChildComponent=({onCancel})=>{const[loading,setLoading]=useState(true);//useEffect监听父组件取消事件useEffect(()=>{......
  • react-query-builder查询构建器中文文档
    官方包https://www.npmjs.com/package/react-querybuilder官方演示https://react-querybuilder.js.org/demo/antd网友经验https://www.cnblogs.com/niyan/p/17414642.htmlimportReactfrom'react';importQueryBuilderfrom'react-query-builder';const......
  • 2. Vue3源码解析之 reactive
    前言我们知道Vue3中声明响应式是通过reactive和ref这两个函数,下面我们通过案例先来看下reactive是如何实现的。案例首先引入reactive和effect两个函数,之后声明obj响应式对象,接着又执行effect函数,该函数传入了一个匿名函数,最后两秒后又修改obj.name值。<!DOC......
  • vite构建的react+ts项目中使用arcodesign组件的问题
    今天在react项目中使用arcodesign组件库,引入的图标巨大无比,调样式也不起作用,如下图。网上找了也没看到类似的问题,去官网文档里看,发现是没有引入组件的样式。在我这个vite构建的react+ts项目中找到两个解决办法:第一个是直接引入全部样式import"@arco-design/web-react/dist/cs......
  • react native 使用 FlatList 实现单选列表组件
    1.最终效果:2.实现代码:importReact,{useState}from'react';import{FlatList,SafeAreaView,StatusBar,StyleSheet,Text,TouchableOpacity,}from'react-native';constDATA=[{id:'zh_CN',title:&#......