RN开发工具和语言版本查看

一行命令 查较为全面的各中版本信息

yarn react-native info
$ /Users/dl/Desktop/gitFiles/StartPineapple/node_modules/.bin/react-native info
info Fetching system and libraries information…
System:
OS: macOS 10.15.5
CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz
Memory: 231.43 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.5.0 - /var/folders/sf/kwbyjr2s6wq9t8709gzdj3xr0000gp/T/yarn–1596708310082-0.44213988172946994/node
Yarn: 1.22.4 - /var/folders/sf/kwbyjr2s6wq9t8709gzdj3xr0000gp/T/yarn–1596708310082-0.44213988172946994/yarn
npm: 6.14.5 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 28, 30
Build Tools: 28.0.3, 29.0.2, 30.0.0
System Images: android-28 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_251 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.1 => 0.63.1
npmGlobalPackages:
react-native: Not Found
由于以上并不全,还是单个挨个都查一遍

语言
node
node -v
v14.5.0
react-native
//npm info react-native
npm info react-native -version
6.14.5
JDK
javac -version
javac 1.8.0_251

包管理
npm
version
npm -v
6.14.5

// npm config list
npm config get registry
https://registry.npm.taobao.org/
core-js版本
npm info core-js
core-js@3.6.5
cocoapods (iOS)
version
pod --version
1.9.3

pod repo

AliBCSpecs

  • Type: git (master)
  • URL: http://repo.baichuan-ios.taobao.com/baichuanSDK/AliBCSpecs.git
  • Path: /Users/dl/.cocoapods/repos/AliBCSpecs

aliyun

  • Type: git (master)
  • URL: https://github.com/aliyun/aliyun-specs.git
  • Path: /Users/dl/.cocoapods/repos/aliyun

cocoapods

  • Type: git (master)
  • URL: https://github.com/CocoaPods/Specs.git
  • Path: /Users/dl/.cocoapods/repos/cocoapods

edu-git-cocoapods-specs

  • Type: git (master)
  • URL: https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git
  • Path: /Users/dl/.cocoapods/repos/edu-git-cocoapods-specs

ibireme

  • Type: git (master)
  • URL: https://github.com/ibireme/YYWebImage.git
  • Path: /Users/dl/.cocoapods/repos/ibireme

trunk

  • Type: CDN
  • URL: https://cdn.cocoapods.org/
  • Path: /Users/dl/.cocoapods/repos/trunk
    说明: 以上这些(库说明文件)repo文件 地址/Users/dl/.cocoapods/repos/,eg: AliBCSpecs存着 百川团队制作的私有库的说明文件

gradle(Android)
来自官网原文,统一改为以下配置吧

也可以尝试阿里云提供的maven 镜像,将android/build.gradle中的jcenter()和 google()
分别替换为
maven { url ‘https://maven.aliyun.com/repository/jcenter’ }和
maven { url ‘https://maven.aliyun.com/repository/google’ }(注意有多处需要替换)。

项目根目录下:
cd android
./gradlew --v

展示信息如下:


Gradle 6.2

Build time: 2020-02-17 08:32:01 UTC
Revision: 61d3320259a1a0d31519bf208eb13741679a742f

Kotlin: 1.3.61
Groovy: 2.5.8
Ant: Apache Ant™ version 1.10.7 compiled on September 1 2019
JVM: 9.0.4 (Oracle Corporation 9.0.4+11)
OS: Mac OS X 10.15.5 x86_64

IDE
Xcode
Version 11.3.1 (11C504)
Android Studio
Android Studio 4.0
Build #AI-193.6911.18.40.6514223, built on May 20, 2020
Runtime version: 1.8.0_242-release-1644-b3-6222593 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.15.5

<think>好的,我现在需要帮助用户了解React Native开发的入门教程资源。首先,根据用户提供的引用内容,用户已经接触过React Native的基本概念,比如安装Node.js、npm、React Native CLI,以及View组件的使用。接下来,我需要整理一个结构清晰的回答,确保符合用户提到的系统级指令,比如使用正确的中文回答、生成相关问题,并正确引用提供的资料。 首先,我应该按照用户的要求,将回答分成几个步骤,每个步骤要详细但不过于复杂。用户提到的引用[1]中提到了安装Node.jsnpm,使用CLI安装React Native,以及配置AndroidiOS工具。引用[2]则涉及View组件的基础使用。因此,我需要把这些内容整合到回答中,并自然地添加引用标识。 然后,我需要确保所有行内数学表达式用$...$格式,不过在这个问题中可能用不上数学公式,但需要检查是否有其他需要格式化的地方。独立公式可能也不需要,但如果有的话要用$$...$$。不过React Native开发更多是关于代码步骤,所以重点可能是在代码块步骤说明上。 接下来,用户需要生成相关问题。我需要考虑用户可能对React Native开发的其他方面感兴趣,比如性能优化、调试方法、组件使用等,所以需要生成三个相关问题,确保它们与主题相关且有实际意义。 最后,要确保回答结构清晰,分步骤说明,并且引用正确的资料。例如,在讲解安装步骤时,需要引用[^1],在讲解View组件时引用[^2]。同时,代码示例需要正确格式化,使用三个反引号包围,并标明语言类型。 现在开始组织内容: 1. 开发环境搭建:根据引用[1],需要安装Node.jsnpm,安装React Native CLI,配置Android StudioXcode。这里要分点说明,并提到版本兼容性的重要性。 2. 创建第一个应用:使用CLI初始化项目,运行应用。需要给出示例命令,如npx react-native init MyApp,并说明如何启动应用。 3. 核心概念与组件:介绍View组件,引用[2]中的代码示例,说明其作用,并可能扩展到其他核心组件如Text、ScrollView等。 4. 调试与优化工具:提到React DevTools,Chrome开发者工具,以及热重载功能。 5. 学习资源推荐:官方文档,社区资源如GitHub、Stack Overflow,以及在线课程平台。 然后生成相关问题,比如如何调试性能问题,组件之间的通信方式,处理不同平台的兼容性等。 检查所有引用是否正确添加,代码块是否正确,是否使用中文,结构是否清晰。确保没有使用任何markdown格式,除了代码块引用标识。最后确认回答符合用户的所有要求。</think>### React Native 开发入门指南 #### 一、开发环境搭建 1. **安装 Node.js npm** Node.js 是运行 React Native 的基础环境,npm 用于管理依赖包。建议安装 LTS(长期支持)版本以保持兼容性。 安装后通过命令行验证: ```bash node -v npm -v ``` 2. **安装 React Native CLI** 使用 npm 全局安装脚手架工具: ```bash npm install -g react-native-cli ``` 3. **配置 Android/iOS 开发工具** - **Android**: 安装 Android Studio,配置 SDK 虚拟设备。确保环境变量 `ANDROID_HOME` 正确设置。 - **iOS**: 需 macOS 系统,安装 Xcode 并配置命令行工具。 --- #### 二、创建第一个应用 1. **初始化项目** 使用 CLI 创建新项目: ```bash npx react-native init MyFirstApp ``` 2. **运行应用** - Android: ```bash npx react-native run-android ``` - iOS: ```bash cd ios && pod install && cd .. npx react-native run-ios ``` --- #### 三、核心概念与组件 1. **View 组件** 作为基础容器,类似 Web 的 `<div>`,用于布局样式管理: ```javascript import { View, Text, StyleSheet } from 'react-native'; const App = () => ( <View style={styles.container}> <Text>Hello React Native</Text> </View> ); const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' } }); ``` 2. **常用组件** - `Text`: 显示文本 - `ScrollView`: 可滚动容器 - `Button`: 交互按钮 - `FlatList`: 高性能列表渲染 --- #### 四、调试与优化工具 1. **React DevTools** 安装浏览器插件,实时检查组件树状态。 ```bash npm install -g react-devtools ``` 2. **Chrome 开发者工具** 通过 `Debug` 菜单启用,支持断点调试网络请求分析。 3. **性能优化** 使用 `Hermes` 引擎(默认启用)提升启动速度,通过 `React.memo` 减少重复渲染。 --- #### 五、学习资源推荐 1. **官方文档** [React Native 官网](https://reactnative.dev/)提供完整的组件文档 API 说明。 2. **社区资源** - GitHub 开源项目(如 React Navigation) - Stack Overflow 常见问题解答 3. **在线课程** Udemy Coursera 上的实战课程(如《React Native 全栈开发》)。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值