ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

ReactNative简介:

ReactNative是基于React语法来进行开发移动app的框架;

ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替网页中使用的一些元素,如:div, p, img 都不能用了;

React Native 组件就是对原生视图的封装,因此使用 React Native 编写的应用外观、性能等与其他任何原生应用一样。

开发环境:

无论是什么开发平台,搭建android环境都需依赖:Node、JDK 和 Android Studio(获得编译android的工具和环境);

搭建ios环境只允许使用macOS作为开发平台,且依赖:Node、Watchman、Xcode(获得编译iOS的工具和环境) 和 CocoaPods;

具体环境配置可阅读:https://blog.csdn.net/weixin_46758988/article/details/117967747

对项目进行说明:

	1.项目根目录下index.js(入口文件)中AppRegistry.registerComponent可用来设置应用名称和注册应用首页,一般引用app.json中的配置设置应用名。2.App.js为项目的首页,此文件中引用了其它组件。

创建一个index.js文件:

前面环境配置已经使用react-native-cli启动了一个项目,并打包成了apk文件,现在将介绍具体开发,这里从一个入口index.js文件开始:

	//1.因为是使用脚手架进行搭建的项目,因此直接修改业务代码即可,引入react如:import React from 'react';//2.在ReactNative中没有web中的标签,ReactNative中使用组件代替标签,这些组件是对原生组件的封装,使用具体的组件时,需要按需引入,如:import {Text,View,StyleSheet} from 'react-native';//3.使用react语法定义一个组件:class Header extents React.Component{render(){return(<View>{/*view组件类似web中div*/}<Text>hello</Text></View>)}}export default Header;

在设备上运行(调试):

开发中会经常对应用进行测试,已达到开发要求,因此需要不断的对其进行测试,要测试就要运行在移动设备或虚拟机上,其方法如:

	1.将手机等设备通过数据线连接到电脑上。2.开启手机USB调试。3.终端运行:adb devices,如果输入信息有设备,则表示连接成功。4.终端继续运行:npx react-native run-android 运行应用。(可运行:npx react-native run-android --variant=release安装release版,但是需要配置签名)

ReactNative中常用组件:

ReactNative中的组件在使用时应该按需从react-native中导入。
在这里插入图片描述

更多组件请阅读相关文档:https://www.react-native.cn/docs/components-and-apis
useState状态:

ReactNative中使用函数声明组件定义状态时,使用useState方法,具体使用如:

	//1.引入useState方法,使用大括号表示按需引入import React,{useState} from 'react';//2.初始化一个变量的值,可以是任意数据类型,这个值写在方法括号中,同时第二个参数为一个函数,用来更新设置状态的值,如:const Person = (props) => {const {personName,setName} = useState('jack')}

FlatList组件:

	const Lists = () => {var lis=[{values: '1'},{values: '2'},{values: '3'}]return (<View><FlatList data={lis} renderItem={({item}) => <Text>{item.values}</Text>}/>{/*renderItem使用{}接收一个函数,函数中传递的参数为数据;data使用{}接收数据*/}</View>);}

SectionList组件:

	 const ListGroups = () => {const liGroup = [{title: 'Group1', data: ['1', '2', '3']},{title: 'Group2', data: ['a', 'b', 'c']},]return (<View><SectionListsections={liGroup}renderItem={({item}) => <Text>{item}</Text>}renderSectionHeader={({section}) => <Text>{section.title}</Text>}keyExtractor={(item, index) => item+'---'+index}/></View>);}

Platform 模块:

它是一个检测平台的模块,Platform.OS在iOS上返回ios,在安卓或模拟器返回android,因为部分组件是按平台区分的,不同的平台不能使用,此时可以借助Platform进行判断然后针对不同的平台写不同的代码,其用法如:

	// 1.引入Platform模块:import {Platform} from 'react-native';//2.针对不同的平台写不同的代码// 2-1:Platform.OS判断当前设备是否为iOS,返回iOS或android,如:const isIOS = Platform.OS === 'ios' ? true : false;console.log(isIOS);// 2-2:Platform.select()传入一个对象,对象的key值定义为ios或android, Platform.select会根据平台返回ios或android中key对应的值,如:const  Devices = Platform.select({ios:'这是ios设备',android:'这是android设备'});//利用它可以做出判断,在不同的平台上声明不同的组件:key后接一个函数或对象声明组件,它返回的就是key的value值console.log(Devices);// 2-3:Platform.Version用于检测平台版本,它返回一个数字或字符串,如:console.log('当前设备的版本号为:'+Platform.Version);// 2-4:Platform.isTV用于检测平台是否为TV。

特定平台扩展名:

当不同平台代码较为复杂时,不建议在一个文件夹中书写不同平台的代码,此时应该将android和ios的代码分不同的文件书写,ReactNative会根据平台自动加载.ios.js或.android.js和.native.js(针对web端复用文件)文件;因此,当针对不同平台需要开发较复杂或大量代码时,可以分文件存储代码,如针对不同平台的Header组件文件夹名:

	Header.ios.jsHeader.android.js//引入并使用Header组件:import Header from './components/Header';<Header/>

定义样式:

ReactNative中可以通过StyleSheet.create()创建一个样式对象,里面放一个对象,对象里面是键值对方式定义样式,如:

	 // 导入styleSheet模块:import {styleSheet} from 'react-native';// 定义一个样式对象,const style = styleSheet.create({box:{width:200,height:400},font:{fontSize:20,}})// 使用样式时,通过style.key即可,如:style.box

React Native 中使用 flexbox 规则来布局可以解决不同尺寸设备布局不一致问题,一般使用flexDirection、alignItems和 justifyContent即可满足常见的布局要求。

TV端应用:

React Native 应用只需在 JavaScript 端简单修改甚至无需修改,就能在电视和机顶盒设备运行,其做法为:

	 //1.在AndroidManifest.xml文件中加入以下配置代码:<application android:banner="@drawable/tv_banner"> //加入自定义的banner图作为TV设备上的图标<intent-filter><category android:name="android.intent.category.LEANBACK_LAUNCHER"/>//当在android上运行时创建它</intent-filter></application>

图片组件:

	<Image source={require('./img/check.png')} /><Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />//网络图必须设置宽高:<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}style={{width: 400, height: 400}} />//背景图:<ImageBackground source={...} style={{width: '100%', height: '100%'}}><Text>hello</Text></ImageBackground>

触摸事件:

	// 1.Button是一个按钮组件,必须有title属性和onPress按下事件:<Button title = 'info' onPress={() => {Alert.alert('hello');}}/>

打包apk发布版:

Android 要求所有应用都有签名才会被允许安装在用户手机上,因此在上传到应用商店前,应先打包一个有签名的apk,其步骤如下:

	1.在javaJDK中bin目录下打开终端用于键入命令生成签名秘钥。2.在终端键入命令:keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 ,这里使用keytool命令来生成一个秘钥文件,具体配置项说明:my-release-key.keystore(生成秘钥文件的文件名,需要保护,特别重要,.前面的名称可以修改)、my-key-alias(也很重要,需要记住,可以自定义此名称,应用签名用)、10000(表示签名有效时间,这里可以修改),没有说明的表示配置项的key,这里只是讲value做说明。3.键入上面命令后回车,此时会弹出一个输入口令,这里是无法看到的,记住自己输入的口令后回车(小编键入:123as******)4.输入口令后会填入相关信息,根据实际填写即可,大概模板如下图:5.生成的my-release-key.keystore文件在当前bin目录下。6.将生成的my-release-key.keystore文件复制到项目中android/app下。7.编辑项目中android目录下gradle.properties文件,对其新增配置后的代码如(输入自己生成秘钥文件时的相关信息):MYAPP_RELEASE_STORE_FILE=秘钥文件名MYAPP_RELEASE_KEY_ALIAS=alias的值MYAPP_RELEASE_STORE_PASSWORD=密码MYAPP_RELEASE_KEY_PASSWORD=密码8.在项目中android/app/build.gradle文件中配置signingConfigs下debug,value为生成签名文件时的配置信息,如:storeFile file('my-release-key.keystore')storePassword '生成时的密码'keyAlias 'my-key-alias'keyPassword '生成时的密码'9.终端切换到项目的android目录下,键入:./gradlew assembleRelease10.将项目中android\app\build\outputs\apk\release目录下后缀为apk的文件上传到各大应用商店即可。

在这里插入图片描述

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

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

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

相关文章

odis工程师使用方法_傅里叶红外光谱仪常见故障维修及排除方法,你了解有多少种呢?...

傅里叶红外光谱仪在使用过程中难免会出现故障&#xff0c;那我们该怎么检修呢&#xff1f;赛默飞傅里叶红外光谱仪有些光谱仪器的使用说明书会给出光谱仪的常见故障及排查方法&#xff0c;有些光谱仪器还有自诊断功能&#xff0c;当傅里叶红外光谱仪不能正常工作时&#xff0c;…

微信小程序简介、发展史、小程序的优点、申请账号、开发工具、初识wxml文件和wxss文件

微信小程序介绍&#xff1a; 小程序简介&#xff1a; 小程序是一种连接用户与服务的方式&#xff0c;它能在微信内被便捷地获取和传播&#xff0c;具有出色的使用体验。 不需要下载安装&#xff0c;用户通过搜一搜或扫一扫就可以打开使用&#xff0c;使用完后退出即可。 小…

tia v15 添加项目_硬技能,TIA 博途软件界面的介绍

在前面的文章中给大家介绍了TIA 博途软件的安装包等介绍&#xff0c;这次小编给大家介绍一下TIA 博途软件的界面。#电工学习PLC#你知道吗&#xff0c;在博途软件的自动化项目任务的创建中&#xff0c;我们可以使用portal视图和项目视图。Portal视图是面向任务的视图&#xff0c…

UIImagePickerController按钮的中文问题

UIImagePickerController按钮的中文问题 执行以下两步即可 1. 在targets中设置region为China 2. 在project中添加支持中文 转载于:https://www.cnblogs.com/YouXianMing/p/3935460.html

rsatool使用步骤图解_工作中想要事半功倍?图解来助你

一次会议上&#xff0c;老板让我们进行一场头脑风暴&#xff0c;然后将脑中浮现出来的想法以ppt的形式&#xff0c;在会议上与大家分享。在会上我看到其他区域的同事做的ppt&#xff0c;真的叫一个精美啊&#xff0c;有图形对比、有案例分析、有未来展望。反观自己的&#xff0…

ZRender源码分析2:Storage(Model层)

回顾 上一篇请移步&#xff1a;zrender源码分析1&#xff1a;总体结构 本篇进行ZRender的MVC结构中的M进行分析 总体理解 上篇说到&#xff0c;Storage负责MVC层中的Model&#xff0c;也就是模型&#xff0c;对于zrender来说&#xff0c;这个model就是shape对象&#xff0c;在…

java语言概述、java语言特性、java语言发展史、java语言作用

Java介绍&#xff1a; Java语言概述&#xff1a; Java语言是由美国Sun&#xff08;Stanford University Network&#xff09;斯坦福网络公司的java语言之父–詹姆斯高斯林&#xff0c;在1995年推出的高级的编程语言。所谓编程语言&#xff0c;是计算机的语言&#xff0c;人们…

电脑显示器不亮主机正常_电脑主机已开机 显示屏却不亮(看完秒懂)

台式电脑是工作的得力助手&#xff0c;我们用的是软件&#xff0c;但是如果硬件出问题了&#xff0c;就无法工作了。有时会遇到台式电脑开机&#xff0c;主机开了&#xff0c;但是屏幕却不亮&#xff0c;是怎么回事呢&#xff1f;现在&#xff0c;笔者告诉大家怎样一步步查明原…

二进制的认识、进制之间的转换、计算机储存单位

二进制&#xff1a; 计算机中的数据不同于人们生活中的数据&#xff0c;人们生活采用十进制数&#xff0c;而计算机中全部采用二进制数表示&#xff0c;它只包含0、1两个数&#xff0c;逢二进一&#xff0c;如&#xff1a;1110。每一个0或者每一个1&#xff0c;叫做一个bit&am…

.net一个函数要用另一个函数的值_VLOOKUP函数

两个表格顺序不同&#xff0c;如何匹配合并&#xff1f;如下图&#xff1a;常常遇到有人问我&#xff0c;两个表格需要按照人名合并起来&#xff0c;但是两表的人名顺序并不相同&#xff0c;怎么处理呢&#xff1f;这个就要用到EXCEL大名鼎鼎的VLOOKUP函数了。具体语法如下&…

外部函数获取内部函数变量_一维随机变量的分布函数

一、分布函数、概率密度(一)一维随机变量的分布函数(二)一维离散型随机变量的概率分布(三)一维连续型随机变量的概率密度(四)一维连续型随机变量的函数的概率密度如&#xff1a;设X的概率密度为f(x), g(x)为连续函数&#xff0c;求Yg(x)的概率密度。方法一、定义法step 1. 求出…

DOS命令、Java语言开发环境(JVM、JDK、JRE)

DOS命令&#xff1a; DOS是一个早期的操作系统&#xff08;黑窗口&#xff09;&#xff0c;现在已经被Windows系统&#xff08;图形化&#xff09;取代&#xff0c;对于我们开发人员&#xff0c;目前需要在DOS中完成一些事情&#xff0c;Java语言的初学者&#xff0c;学习一些D…

shell执行docker命令卡挂住_Docker官方文档翻译4

第四篇&#xff1a;Swarms准备工作安装Docker版本1.13或更高版本。安装Docker compose。安装docker machine阅读第1 2 3部分的内容。确保你已发布并推送到注册仓库的friendlyhello镜像。确保你的镜像可以部署为一个容器。 运行这个命令&#xff0c;在你的信息中插入用户名&…

编写第一个Java程序:helloworld

配置好java开发环境后&#xff0c;我们可以编写第一个java程序&#xff08;helloworld&#xff09;。 在开始编写java程序时&#xff0c;我们要知道java程序开发的三个步骤&#xff1a;编写、编译、运行。 编写阶段主要是由程序员编写后缀为.java的文件&#xff1b;将后缀为.ja…

java中关键字、标识符、常量、变量、数据类型

关键字&#xff1a; JAVA语言中已经定义好的具有特殊含义的单词&#xff0c;被称为关键字&#xff0c;关键字是全小写无特殊字符的纯 英文字母&#xff0c;在编辑器中一般有高亮效果&#xff0c;如public、class、static等。 标识符&#xff1a; 在JAVA语言中&#xff0c;自…

js滚动条下拉一定值_JS逆向 | 无限Debugger之淘大象

置顶公众号今天继续和大家研究JS逆向&#xff0c;不少小伙伴在JS逆向的时候遇到过无限debugger的反爬&#xff0c;今天就拿一个网站练练手感受下无限debugger。分析请求先打开这次的目标网站--淘大象(https://taodaxiang.com/credit2)打开「开发者工具」就自动进入debug&#x…

java中数据类型转换、ASCII编码

数据类型转换&#xff1a; JAVA语言中要求参与计算的数据类型要保持一致&#xff0c;如果不一致则会发生数据类型转换&#xff0c;数据类型转换可分为&#xff1a;自动类型转换&#xff08;隐式转换&#xff09;和强制类型转换&#xff08;显式转换&#xff09;。 自动类型转…

pyecharts x轴字体大小调整_pyecharts 柱状图基础篇#学习笔记#

2020年初&#xff0c;很久没有用过pyecharts的我由于工作原因&#xff0c;安装了新版pyecharts之后&#xff0c;以前的pyecharts代码报错了。搜索之后才发现&#xff0c;我安装的是不兼容旧版本的新版。空闲的时间&#xff0c;把新版echart当作新的模块梳理了一下&#xff0c;整…

JAVA语言运算符(算数运算符、赋值运算符、比较运算符、逻辑运算符、三元运算)

运算符 JAVA语言中将运算符分为&#xff1a;算数运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符。 算数运算符&#xff1a;算数运算符是对数字进行一系列的加减乘除等的计算&#xff0c;常见的算数运算符如&#xff1a; public class Operation{public static vo…

真彩色图像数据量 计算_军职在线大学计算机基础(自主模式)

第一章单选题电子计算机的发展已经经过了4代&#xff0c;4代计算机的主要元器件分别是(b)a.电子管&#xff0c;晶体管&#xff0c;中小规模集成电路&#xff0c;激光器件b.电子管&#xff0c;晶体管&#xff0c;中小规模集成电路&#xff0c;大规模或超大规模集成电路 c.晶体管…