React Native 快速Demo(2)

好的,以下是开发环境的详细设置步骤,包括需要安装的工具和每个工具的安装步骤。

1. Node.js 和 npm

Node.js 是一个 JavaScript 运行时环境,npm 是 Node.js 的包管理器。

1.1 安装 Node.js 和 npm
  • 下载 Node.js 安装程序:Node.js 官网
  • 安装程序将同时安装 Node.js 和 npm

验证安装:

node -v
npm -v

2. React Native CLI

React Native CLI 用于创建和管理 React Native 项目。

2.1 安装 React Native CLI
npm install -g react-native-cli

验证安装:

react-native -v

3. Android Studio

Android Studio 是一个用于 Android 应用开发的官方集成开发环境 (IDE)。

3.1 下载和安装 Android Studio
  • 下载 Android Studio:Android Studio 官网
  • 按照安装向导进行安装
3.2 配置 Android Studio
  • 启动 Android Studio,按照安装向导安装 Android SDK

  • 配置 ANDROID_HOME 环境变量:

    • 打开终端并添加以下内容到 ~/.bash_profile~/.zshrc 文件中:
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    
    • 重新加载配置文件:
    source ~/.bash_profile
    # 或
    source ~/.zshrc
    
3.3 安装必要的 Android SDK 工具
  • 启动 Android Studio
  • 打开 “SDK Manager”(在欢迎屏幕或 “Preferences” 中找到)
  • 安装以下 SDK 工具:
    • Android SDK Platform-Tools
    • Android SDK Build-Tools
    • Android API Level(推荐安装最新版本)

4. Xcode (仅限 macOS)

Xcode 是用于 iOS 应用开发的官方集成开发环境 (IDE)。

4.1 下载和安装 Xcode
  • 从 Mac App Store 下载 Xcode
4.2 配置 Xcode
  • 启动 Xcode,按照安装向导安装必要的组件

  • 确保 Xcode Command Line Tools 已安装:

    xcode-select --install
    

5. 设置 React Native 项目

5.1 创建 React Native 项目
react-native init CordePrototype
cd CordePrototype

6. 安装必要的依赖库

在项目根目录下运行以下命令:

npm install redux react-redux redux-thunk
npm install @react-navigation/native @react-navigation/stack
npm install react-native-sqlite-storage
npm install axios
npm install react-native-maps

7. 设置 Android 模拟器

7.1 创建 Android 虚拟设备 (AVD)
  • 启动 Android Studio
  • 打开 “AVD Manager”(在欢迎屏幕或 “Tools” 菜单中找到)
  • 创建一个新的虚拟设备,选择设备类型和系统镜像(推荐选择最新版本)

8. 运行 React Native 项目

8.1 启动 Android 模拟器或连接实际设备
  • 打开 Android Studio,启动创建的虚拟设备
  • 或连接实际的 Android 设备并启用开发者模式和 USB 调试
8.2 运行 React Native 项目

在项目根目录下运行以下命令:

npx react-native run-android
# 或
npx react-native run-ios

9. 配置 Redux 状态管理

9.1 创建 Redux Store

src 文件夹下创建 store 文件夹,并创建 store.js 文件:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';const store = createStore(rootReducer, applyMiddleware(thunk));export default store;
9.2 创建 Reducer

src 文件夹下创建 reducers 文件夹,并创建 index.js 文件:

import { combineReducers } from 'redux';
import logsReducer from './logsReducer';export default combineReducers({logs: logsReducer,
});

reducers 文件夹下创建 logsReducer.js 文件:

const initialState = {logs: [],
};export default function(state = initialState, action) {switch(action.type) {case 'FETCH_LOGS_SUCCESS':return {...state,logs: action.payload,};default:return state;}
}

10. 设置导航

10.1 配置 React Navigation

src 文件夹下创建 navigation 文件夹,并创建 AppNavigator.js 文件:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import LogScreen from '../screens/LogScreen';const Stack = createStackNavigator();function AppNavigator() {return (<NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Log" component={LogScreen} /></Stack.Navigator></NavigationContainer>);
}export default AppNavigator;

11. 创建屏幕组件

11.1 HomeScreen 组件

src 文件夹下创建 screens 文件夹,并创建 HomeScreen.js 文件:

import React from 'react';
import { View, Text, Button } from 'react-native';function HomeScreen({ navigation }) {return (<View><Text>Home Screen</Text><Buttontitle="Go to Log"onPress={() => navigation.navigate('Log')}/></View>);
}export default HomeScreen;
11.2 LogScreen 组件

screens 文件夹下创建 LogScreen.js 文件:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { View, Text, FlatList } from 'react-native';
import { fetchLogs } from '../actions/logActions';function LogScreen() {const dispatch = useDispatch();const logs = useSelector(state => state.logs.logs);useEffect(() => {dispatch(fetchLogs());}, [dispatch]);return (<View><Text>Log Screen</Text><FlatListdata={logs}keyExtractor={item => item.id.toString()}renderItem={({ item }) => (<View><Text>{item.description}</Text></View>)}/></View>);
}export default LogScreen;

12. 创建 Redux Actions

src 文件夹下创建 actions 文件夹,并创建 logActions.js 文件:

import axios from 'axios';export const fetchLogs = () => async dispatch => {try {const response = await axios.get('https://api.example.com/logs');dispatch({type: 'FETCH_LOGS_SUCCESS',payload: response.data,});} catch (error) {console.error(error);}
};

13. 配置 SQLite 数据库

src 文件夹下创建 database 文件夹,并创建 database.js 文件:

import SQLite from 'react-native-sqlite-storage';const db = SQLite.openDatabase({name: 'CordeDB',location: 'default',},() => {},error => {console.log(error);}
);export const createTables = () => {db.transaction(tx => {tx.executeSql(`CREATE TABLE IF NOT EXISTS logs (id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT)`,[],() => {console.log('Table created successfully');},error => {console.log('Error creating table:', error);});});
};export const insertLog = description => {db.transaction(tx => {tx.executeSql(`INSERT INTO logs (description) VALUES (?)`,[description],() => {console.log('Log inserted successfully');},error => {console.log('Error inserting log:', error);});});
};export const fetchLogs = () => {return new Promise((resolve, reject) => {db.transaction(tx => {tx.executeSql(`SELECT * FROM logs`,[],(tx, results) => {let logs = [];for (let i = 0; results.rows.length; i++) {logs.push(results.rows.item(i));}resolve(logs);},error => {reject(error);});});});
};

14. 设置主应用入口

修改 App.js 文件:


import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import store from './src/store/store';
import AppNavigator from './src/navigation/AppNavigator';
import { createTables } from './src/database/database';function App() {useEffect(() => {createTables();}, []);return (<Provider store={store}><AppNavigator /></Provider>);
}export default App;

15. 运行项目

15.1 启动 Android 模拟器或连接实际设备
  • 打开 Android Studio,启动创建的虚拟设备
  • 或连接实际的 Android 设备并启用开发者模式和 USB 调试
15.2 运行 React Native 项目

在项目根目录下运行以下命令:

npx react-native run-android
# 或
npx react-native run-ios

总结

通过以上步骤,可以快速实现一个基本的项目雏型demo,涵盖了核心功能模块,如用户登录、数据采集、地图显示和数据同步。可以在此基础上进行进一步的优化和扩展,根据实际需求添加更多功能和细节。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/24806.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序for循环中的key值有什么用

在小程序&#xff08;特别是微信小程序&#xff09;中&#xff0c;当使用类似于 wx:for 的指令来渲染一个列表时&#xff0c;key 属性&#xff08;或称为 wx:key&#xff09;是一个非常重要的属性。这个属性用于指定列表中项目的唯一的标识符&#xff0c;以帮助小程序优化渲染性…

springboot + Vue前后端项目(第十五记)

项目实战第十五记 写在前面1.后端接口实现1.1 用户表添加角色字段1.2 角色表增加唯一标识字段1.3 UserDTO1.4 UserServiceImpl1.5 MenuServiceImpl 2. 前端实现2.1 User.vue2.2 动态菜单设计2.2.1 Login.vue2.2.2 Aside.vue 2.3 动态路由设计2.3.1 菜单表新增字段page_path2.3.…

【Windows】Revo Uninstaller Pro(卸载工具) v5.2.6 绿色版软件介绍

软件介绍 Revo Uninstaller Pro是一款功能强大的软件卸载工具&#xff0c;它可以帮助用户彻底地清理和卸载计算机上的程序。以下是Revo Uninstaller Pro的一些主要特点&#xff1a; 强大的卸载功能&#xff1a;Revo Uninstaller Pro可以代替操作系统的自带卸载程序&#xff0c…

嵌入式C语言面试题笔试题

一、常见的关键词&#xff1a;sizeof&#xff08;strlen&#xff09;、static、const、volatitle&#xff08;会持续更新&#xff09; 1、sizeof和strlen的区别 &#xff08;1&#xff09;sizeof是求数据类型所占空间的大小&#xff0c;是一个操作符&#xff0c;在编译时计算…

系统架构设计师【补充知识】: 专业英语 (核心总结)

系统架构设计师考试英文试题的出题范围基本局限于系统架构设计方面基础性的、概念性的知识&#xff0c;大多属于名词解释范畴。 一、架构风格 An architectural style defines as a family of such systems in terms of a pattern of structural organization. More specific…

用QT6、QML、FFMPEG写一个有快进功能的影音播放程序

程序如图&#xff1a; 开发环境在ubuntu下&#xff0c;如果改windows下&#xff0c;也就改一下cmakelists.txt。windows下如何配置ffmpeg以前的文章有写&#xff0c;不再重复。 源程序如下&#xff1a; GitHub - wangz1155/ffmpegAudioThread: 用qt6&#xff0c;qml&#xff…

SpringBoot+Vue甘肃非物质文化网站(前后端分离)

技术栈 JavaSpringBootMavenMySQLMyBatisVueShiroElement-UI 系统角色对应功能 用户管理员 系统功能截图

HTTP-web服务器

web服务器 web服务器实现了http和相关的tcp连接处理&#xff0c;负责管理web服务器提供的资源&#xff0c;以及对服务器的配置&#xff0c;控制以及拓展等方面的管理 web服务器逻辑实现了http协议&#xff0c;并负责提供web服务器的管理功能&#xff0c;web服务器逻辑和操作系…

用幻灯片讲解内存分配器Allocator

用幻灯片讲解内存分配器Allocators Allocators 分配器 提供内存分配策略的通用接口委托给 C 运行时&#xff1a;new / delete块内存池不同大小的块内存池 为什么用分配器? 将容器逻辑与内存分配策略解耦速度&#xff1a;内存分配速度慢确保有足够的内存可用确保所需的内…

C语言详解(动态内存管理)2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

7-16 二分查找

7-16 二分查找 分数 25 全屏浏览 切换布局 作者 李廷元 单位 中国民用航空飞行学院 请实现有重复数字的有序数组的二分查找。 输出在数组中第一个大于等于查找值的位置&#xff0c;如果数组中不存在这样的数&#xff0c;则输出数组长度加一。 输入格式: 输入第一行有两个…

配网终端通讯管理板,稳控装置通讯管理卡,铁路信号通讯管理卡

配网终端通讯管理板 ● 配网终端通讯管理板 ● ARM Cortex™-A5 &#xff0c;533MHz ● 256MB RAM&#xff0c;512MB FLASH 配网终端通讯管理板 ARM Cortex™-A5 &#xff0c;533MHz 256MB RAM&#xff0c;512MB FLASH 2x10/100/1000Mbps LAN&#xff08;RJ45&#xff09; 6x…

B3958 [GESP202403 四级] 相似字符串

[GESP202403 四级] 相似字符串 题目描述 对于两个字符串 A A A 和 B B B&#xff0c;如果 A A A 可以通过删除一个字符&#xff0c;或插入一个字符&#xff0c;或修改一个字符变成 B B B&#xff0c;那么我们说 A A A 和 B B B 是相似的。 比如 apple \texttt{apple}…

Redis 内存回收

文章目录 1. 过期key处理1.1 惰性删除1.2 周期删除 2. 内存淘汰策略 Redis 中数据过期策略采用定期删除惰性删除策略结合起来&#xff0c;以及采用淘汰策略来兜底。 定期删除策略&#xff1a;Redis 启用一个定时器定时监视所有的 key&#xff0c;判断key是否过期&#xff0c;过…

深入理解Java多态:灵活性与可扩展性的完美结合

多态&#xff08;Polymorphism&#xff09;是面向对象编程&#xff08;Object-Oriented Programming, OOP&#xff09;的核心概念之一。多态性允许一个接口或方法适用于不同的对象类型&#xff0c;从而实现代码的重用性和灵活性。本文将深入探讨Java中的多态性&#xff0c;包含…

【JavaScript脚本宇宙】探索JavaScript拖放库世界:特性、示例与应用场景

解锁JavaScript拖放神器&#xff1a;库特性对比及最佳实践分享 前言 JavaScript拖放库在现代Web开发中扮演着重要角色&#xff0c;为用户提供了直观的交互体验。从基本的拖拽功能到复杂的多点触控手势&#xff0c;这些库使开发人员能够轻松地实现各种拖放效果&#xff0c;为网…

如何使用Python中的os模块进行文件和目录操作

Python中的os模块提供了许多与操作系统交互的函数&#xff0c;包括文件和目录操作。以下是一些使用os模块进行文件和目录操作的基本示例&#xff1a; 1. 获取当前工作目录 python复制代码 import os current_dir os.getcwd() print(current_dir) 2. 改变当前工作目录 pytho…

Linux安装Qt5.14.2

下载 qt 5.14.2下载网址 下载qt-opensource-linux-x64-5.14.2.run Linux系统下载.run文件&#xff08;runfile文件&#xff09;&#xff0c;windows系统下载.exe文件&#xff0c;mac系统下载.dmg文件。 md5sums.txt中是各个文件对应的MD5校验码。 验证MD5校验码 md5sum是li…

简单使用phpqrcode 生成二维码图片

$path ROOT_PATH; //tp项目根路径 require_once $path.vendor/phpqrcode/phpqrcode.php; //加载phpqrcode库 $url http://.$_SERVER[HTTP_HOST]./home/index/detail?id.$param[id]; $value $url; //二维码内容 $errorCorrectionLevel L; //容错级别 $mat…

Elasticsearch之深入聚合查询

1、正排索引 1.1 正排索引&#xff08;doc values &#xff09;和倒排索引 概念&#xff1a;从广义来说&#xff0c;doc values 本质上是一个序列化的 列式存储 。列式存储 适用于聚合、排序、脚本等操作&#xff0c;所有的数字、地理坐标、日期、IP 和不分词&#xff08; no…