创建react native项目的笔记

创建react native项目的笔记

    • 重新下载 ruby
    • 安装 watchman
    • 安装 cocoapods
    • 安装 react native 项目
    • 创建好项目后安装 ios 依赖
    • 清除设备缓存
    • 安装 android 依赖
    • 链接 网易 mumu 模拟器
    • 安装路由 Navigation
    • 页面之间的跳转逻辑
    • 自定义头部样式
    • 判断不同设备平台代码示例
    • 安装 Axios
    • 安装本地简单存储工具
    • 安装轮播图
    • 安装 Toast 消息弹出框
    • 公共信息确认框
    • 安装线性渐变色
    • 安装富文本解析器
    • 安装下拉选择插件
    • 安装上传图片插件
    • 类似于小程序 onShow 生命周期

重新下载 ruby

1.ruby环境必须是2.6.10版本以上(查看ruby版本 ruby -v)brew reinstall ruby2.进入vim编辑器
vim ~/.zshrc3.配置
export PATH="/usr/local/opt/ruby/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"
export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"4.重新执行一下文件
source ~/.zshrc

安装 watchman

brew install watchman

安装 cocoapods

sudo gem install cocoapods
pod setup

安装 react native 项目

npx react-native@latest init <项目名称>npx react-native run-ios
npx react-native run-android

创建好项目后安装 ios 依赖

1.第一步
进入ios文件夹
cd ios2.第二步
bundle install3.第三步
bundle exec pod install运行项目打包ios

清除设备缓存

1.android
npx react-native start --reset-cache2.ios
npx react-native start --reset-cache --reset-cache

安装 android 依赖

cd android
./gradlew clean
cd ..
npx react-native run-android

链接 网易 mumu 模拟器

1.windows
adb connect 127.0.0.1:75552.mac
adb connect 127.0.0.1:5555

安装路由 Navigation

1.第一步
npm install @react-navigation/native2.第二步
npm install react-native-screens react-native-safe-area-contextreact-native-safe-area-context:提供了处理安全区域(Safe Area)的能力。安全区域是指屏幕上不受刘海屏、圆角等系统元素遮挡的区域在App.jsx文件中引入
(NavigationContainer是一个组件,用于管理我们的导航树并包含导航状态。
这个组件必须包裹所有的导航器结构。通常,我们会在应用程序的根部渲染这个组件,这通常是从App.js导出的组件)
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';安装的库是导航器的构建块和共享基础3.第三步
npm install @react-navigation/native-stack@react-navigation/native-stack依赖于react-native-screens和上面安装的其他库在App.jsx文件中引入
import { createNativeStackNavigator } from '@react-navigation/native-stack';4.安装底部tab切换
npm install @react-navigation/bottom-tabsTab.Navigator组件的screenOptions属性用于设置所有Tab.Screen组件的默认选项和样式。下面是一些常用的样式选项:
- tabBarStyle:设置标签栏的样式,可以包括backgroundColor、height、borderTopWidth等。
- tabBarActiveTintColor:设置活动标签的文本颜色。
- tabBarInactiveTintColor:设置非活动标签的文本颜色。
- tabBarLabelStyle:设置标签的文本样式,可以包括fontFamily、fontSize、fontWeight等。
- tabBarIconStyle:设置标签图标的样式,可以包括width、height、tintColor等。
- tabBarIndicatorStyle:设置标签栏指示器的样式,可以包括backgroundColor、height等。
- tabBarPressColor:设置标签栏被按下时的颜色。
- tabBarPressOpacity:设置标签栏被按下时的不透明度。Tab.Screen组件的options属性用于设置选项,可以通过它来自定义标签页的外观和行为。下面是一些常用的设置项:
- tabBarLabel:标签页的显示文本。
- tabBarIcon:标签页的图标,可以使用图标组件或自定义图标。
- tabBarVisible:设置标签页是否可见。
- tabBarAccessibilityLabel:设置标签页的辅助功能标签。
- tabBarTestID:设置标签页的测试ID,用于测试目的。
- tabBarBadge:设置标签页的徽章,显示在图标上,并可以用于显示未读消息数等。
- tabBarBadgeStyle:设置标签页徽章的样式。
- tabBarButtonComponent:自定义标签页的按钮组件。
- tabBarOnPress:点击标签页时触发的回调函数。

页面之间的跳转逻辑

navigation.popToTop();//返回顶部页面navigation.goBack(2,{}); // 返回到第二个页面navigation.navigate('Fourth',{});//跳转到对应页面import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate('List');import { useRoute } from '@react-navigation/native';
const route = useRoute();
route.params

添加
npm install react-native-gesture-handler

自定义头部样式

1.headerStyle:一个应用于包裹标题的View的样式对象。如果在上面设置了backgroundColor,那么标题的颜色将为该颜色- backgroundColor:标题栏的背景颜色。
- borderBottomColor:标题栏底部边框的颜色。
- borderBottomWidth:标题栏底部边框的宽度。
- height:标题栏的高度。2.headerTintColor:
返回按钮和标题都使用此属性作为它们的颜色。在下面的示例中,我们将tintColor设置为白色(#fff),以使返回按钮和标题为白色。- 颜色名称:您可以使用预定义的颜色名称,如"red"、"blue"、"green"等。
- 十六进制值:您可以使用十六进制颜色代码,如"#FF0000"代表红色。
- RGB值:您可以使用RGB值来指定颜色,如"rgb(255, 0, 0)"代表红色。3.headerTitleStyle属性用于自定义标题的样式,可以设置以下样式属性:- fontFamily:标题的字体族名称(如"Arial"、"Helvetica"等)。
- fontWeight:标题的字重(如"bold"、"normal"等)。
- fontSize:标题的字号大小。
- color:标题的颜色。
- textAlign:标题的对齐方式(如"left"、"center"、"right"等)。
- textTransform:标题的文本转换方式(如"uppercase"、"lowercase"等)。
- letterSpacing:标题的字间距。
- lineHeight:标题的行高。

判断不同设备平台代码示例

const refreshControl = Platform.select({ios: <RefreshControlIOSrefreshing={refreshing}onRefresh={handleRefresh}/>,android: <RefreshControlrefreshing={refreshing}onRefresh={handleRefresh}/>
});

安装 Axios

npm install axios

安装本地简单存储工具

1.第一步
npm install @react-native-async-storage/async-storage2.第二步
导入库并使用AsyncStorage
import AsyncStorage from "@react-native-async-storage/async-storage";// token模块
const TokenKey = 'windoentToken';
//存储数据
export const setToken = async value => {await AsyncStorage.setItem(TokenKey, value);
};//获取数据
export const getToken = async () => {try {const value = await AsyncStorage.getItem(TokenKey);return value;} catch (error) {return null;}
};//删除数据
export const removeToken = async () => {await AsyncStorage.removeItem(TokenKey);
};

安装轮播图

npm install react-native-swiper

安装 Toast 消息弹出框

1.安装
npm install --save react-native-toast-message2.在App.jsx中注册全局
// App.jsx
import Toast from 'react-native-toast-message';export function App(props) {return (<>{/* ... */}<Toast /></>);
}3.组件中使用
import Toast from 'react-native-toast-message';
Toast.show({type: 'success',//`success`、`error`、`info`text1: 'Hello',text2: 'This is some something 👋'
});

公共信息确认框

1.在组件中引入
import ShowModal from '../../componets/ShowModel';2.在组件中注册
<ShowModal ref={showModelRef} />const showModelRef = useRef(null);const showMOdel = () => {showModelRef.current.show({title: '标题',content: '内容-加油',success: res => {console.log('[返回值-12]', res);},});};

安装线性渐变色

1.安装
npm install react-native-linear-gradient2.使用
import LinearGradient from 'react-native-linear-gradient';
<LinearGradientcolors={['#FFAA6B', '#FF5B23']}start={{ x: 0, y: 0 }}end={{ x: 1, y: 0 }}style={{ flex: 1 }}><View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text style={{ color: 'white', fontSize: 24 }}>Hello, this is a gradient background!</Text></View>
</LinearGradient>

安装富文本解析器

1.安装
npm install react-native-htmlview --save2.使用
import HTMLView from 'react-native-htmlview';
render() {const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;return (<HTMLViewvalue={htmlContent}stylesheet={styles}/>);}const styles = StyleSheet.create({a: {fontWeight: '300',color: '#FF3366', // make links coloured pink},
});

安装下拉选择插件

React Native >= 0.60+
https://www.npmjs.com/package/react-native-wheel-pick
1.安装
npm install react-native-wheel-pick --save-dev --legacy-peer-deps
npm install @react-native-picker/picker --save-dev --legacy-peer-deps
npm install @react-native-community/datetimepicker --save-dev --legacy-peer-deps2.安装日期
https://www.npmjs.com/package/react-native-date-picker?activeTab=readme
npm install react-native-date-picker --save

安装上传图片插件

https://github.com/react-native-image-picker/react-native-image-picker
1.安装
npm install react-native-image-picker -S2.使用
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';//点击上传图片const uploadHandle = async () => {const options = {mediaType: 'photo', //photo or video or mixed(launchCamera on Android does not support 'mixed').quality: 0.5,selectionLimit: 1,};const response = await launchImageLibrary(options);console.log('[]', response);if (response.didCancel) {console.log('User cancelled image picker');} else if (response.error) {console.log('ImagePicker Error: ', response.error);} else if (response.customButton) {console.log('User tapped custom button: ', response.customButton);} else {// Get image sourceconst files = response.assets;const source = {type: files[0].type,uri: files[0].uri,name: files[0].fileName,fileSize: files[0].fileSize,};// Set image sourceconsole.log('[上传图片]', source);}};

类似于小程序 onShow 生命周期

import {useFocusEffect} from '@react-navigation/native';
const [appStatus, setAppStatus] = useState(true);
useEffect(() => {console.log('[页面状态]', appStatus);if (appStatus) {getInitList();}return () => {// 在组件销毁时触发};}, [appStatus]);useFocusEffect(() => {setAppStatus(true);return () => {setAppStatus(false);};});

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

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

相关文章

java mysql druid mybatis-plus里使用多表删除出错的一种处理方式

今天在出来多表删除的时候在mapper.xml用了下面的多个delete语句 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"…

Spring Cloud 系列之OpenFeign:(7)链路追踪zipkin

传送门 Spring Cloud Alibaba系列之nacos&#xff1a;(1)安装 Spring Cloud Alibaba系列之nacos&#xff1a;(2)单机模式支持mysql Spring Cloud Alibaba系列之nacos&#xff1a;(3)服务注册发现 Spring Cloud 系列之OpenFeign&#xff1a;(4)集成OpenFeign Spring Cloud …

PHP酒店点菜管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 酒店点菜管理系统是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88232051 论文 https://…

前端技术Vue学习笔记--005

Vue学习笔记 一、非父子通信-event bus 事件总线 作用&#xff1a;非父子组件之间&#xff0c;进行简易消息传递。&#xff08;复杂场景用----Vuex&#xff09; 使用步骤&#xff1a; 创建一个都能访问的事件总线 &#xff08;空Vue实例&#xff09;-----utils/EventBus.js /…

两个数组的交集-C语言/Java

描述 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序。&#xff08;1 < nums1.length, nums2.length < 1000&#xff0c;0 < nums1[i], nums2[i] < 1000&#xff09; 示例1 输入…

【golang】通道(channel)的基本原理(一)

通道类型的值本身就是并发安全的&#xff0c;这也是Go语言自带的、唯一一个可以满足并发安全性的类型。 声明一个通道类型变量的时候&#xff0c;我们首先要确定该通道类型的元素类型&#xff0c;决定了我们可以通过这个通道传递什么类型的数据。 在初始化通道的时候&#xf…

一键批量修改文件夹名称,中文瞬间变日语,轻松搞定重命名

大家好&#xff01;现在为了更好地适应全球化发展&#xff0c;许多人都有了海外交流、旅行、学习的需求。但是难免遇到一个问题&#xff1a;在电脑中的中文文件夹名称如何快速翻译成日语&#xff1f; 首先&#xff0c;第一步&#xff0c;我们需要打开文件批量改名&#xff0c;…

【Unity】编辑器下查找制定文件下的所有特定资源

需求上很简单&#xff0c;就是在编辑器下&#xff0c;找到某个制定文件下的所有特定资源&#xff08;UnityEngine.Object&#xff09;。Unity 没有提供专门的 API&#xff0c;我一开始想在网上搜索代码&#xff0c;发现没有现成可以直接用的。 功能实现本身并不复杂&#xff0c…

AWS EKS 集群自动扩容 Cluster Autoscaler

文章目录 一&#xff0c;需求工作需求说明 二&#xff0c;部署精简命令执行1&#xff0c;要求2&#xff0c;查看EC2 Auto Scaling groups Tag3&#xff0c;创建Serviceaccount需要的Policy&#xff0c;Role4&#xff0c;部署Cluster Autoscaler5&#xff0c;验证6&#xff0c;常…

zotero在不同系统的安装(win/linux)

1 window系统安装 zotero 官网&#xff1a; https://www.zotero.org/ 官方文档 &#xff1a;https://www.zotero.org/support/ (官方)推荐常用的插件: https://www.zotero.org/support/plugins 入门视频推荐&#xff1a; Zotero 文献管理与知识整理最佳实践 点击 exe文件自…

【环境配置】Windows 10 安装 PyTorch 开发环境,以及验证 YOLOv8

Windows 10 安装 PyTorch 开发环境&#xff0c;以及验证 YOLOv8 最近搞了一台Windows机器&#xff0c;准备在上面安装深度学习的开发环境&#xff0c;并搭建部署YOLOv8做训练和测试使用&#xff1b; 环境&#xff1a; OS&#xff1a; Windows 10 显卡&#xff1a; RTX 3090 安…

Bug日记-webstorm运行yarn 命令报错

在windows中输入yarn -v正确输出&#xff0c;在webstrom终端中运行yarn命令输出错误 问题&#xff1a;可能是由于 WebStorm 配置问题导致的。 解决方案&#xff1a; 检查 WebStorm 的终端配置&#xff1a;在 WebStorm 中&#xff0c;点击菜单栏的 “File”&#xff08;文件&am…

DeepSort:基于检测的目标跟踪的经典

本文来自公众号“AI大道理” DeepSORT在SORT的基础上引入了深度学习的特征表示和更强大的目标关联方式&#xff0c;有效地减少了身份切换的数量&#xff0c;缓解了重识别问题。 ​ 1、DeepSORT简介 DeepSORT的主要思想是将目标检测和目标跟踪两个任务相结合。 首先使用目标检…

排序算法分析——什么时候 用 什么排序

排序算法 & 分析 排序算法历史排序算法分析很快的排序较快的排序中等的排序很慢的排序 分析的结果0.没有要求1.对速度有要求2.边排序边操作3.条件1&条件24.在有序数中操作5.条件1&条件4 了解各种排序&#xff0c;详见排序专栏 排序算法历史 纵观排序算法的历史&a…

硬件产品经理:从入门到精通(新书发布)

目录 简介 新书 框架内容 相关课程 简介 在完成多款硬件产品从设计到推向市场的过程后。 笔者于2020年开始在产品领域平台输出硬件相关的内容。 在这个过程中经常会收到很多读者的留言&#xff0c;希望能推荐一些硬件相关的书籍或资料。 其实&#xff0c;笔者刚开始做硬…

10. 实现业务功能--退出登录

目录 1. 实现 Controller 2. 单体测试 3. 实现前端界面 退出的具体实现逻辑如下&#xff1a; 1. 用户访问退出接口 2. 服务器注销 Session( 在 Controller 中可以直接进行处理 &#xff09; 3. 返回成功或失败 4. 如果返回成功浏览器跳转到相应页面 5. 结束 一般来说&#…

使用VS2015打开.pro文件后,编译报错

编译报错内容&#xff1a; MSB8036 找不到 Windows SDK 版本10.0.18362.0。请安装所需的版本的 Windows SDK 或者在项目属性页中或通过右键单击解决方案并选择“重定解决方案目标”来更改 SD 方法&#xff1a; 1.右键点击 Solution上&#xff0c;在弹出的框中点击“Retarget…

调整数组使奇数全部都位于偶数前面

题目内容&#xff1a; 输入一个整数数组&#xff0c;实现一个函数&#xff0c; 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分&#xff0c; 所有偶数位于数组的后半部分。 题目思路&#xff1a; 将奇数部分放在前半部分&#xff0c;偶数部分放在后半部分&am…

学习笔记230804---restful风格的接口,delete的传参方式问题

如果后端提供的删除接口是restful风格&#xff0c;那么使用地址栏拼接的方式发送请求&#xff0c;数据放在主体中&#xff0c;后端接受不到&#xff0c;当然也还有一种可能&#xff0c;后端在这个接口的接参设置上是req.query接参。 问题描述 今天遇到的问题是&#xff0c;de…