企业官网建设流程全解析

图书馆网站建设背景,免费做网站支持绑定,网页设计教育培训,杨和网站设计制作一、React Native是什么#xff1f; 简单来说#xff0c;React Native是一个让你用JavaScript和React编写真正原生移动应用的框架。 React Native 的三种身份#xff0c;用大白话说就是#xff1a; 它不是网页套壳#xff08;不像 Cordova 在 App 里内嵌一个浏览器来跑你的…一、React Native是什么简单来说React Native是一个让你用JavaScript和React编写真正原生移动应用的框架。React Native 的三种身份用大白话说就是它不是网页套壳不像 Cordova 在 App 里内嵌一个浏览器来跑你的代码它不转译代码不会把你的 JS 代码变成 Java 或Swift 代码它是“传话员”你的 JavaScript 通过它“告诉”手机原生系统要画什么界面用个形象的比喻传统混合应用像是“在浏览器中运行网页然后打包成App”而React Native则是“用JavaScript操作原生组件搭建真正的本地程序”。二、为什么需要React Native在React Native出现之前移动开发者面临三大困境1. 人力成本翻倍开发一个应用需要iOS团队Swift/Objective-C XcodeAndroid团队Java/Kotlin Android Studio结果两套代码、两个团队、双倍时间和成本2. 体验与效率的权衡纯原生体验最好但效率最低混合应用(H5)一次编写体验打折扣跨平台(如Flutter)较新生态有待完善3. 技术栈分裂Web开发者难以进入移动领域移动开发者难以共享Web生态React Native的解决方案让Web开发者用已有技能进入移动开发同时保持接近原生的性能。三、核心原理理解React Native的工作原理能帮你更好地使用它JavaScript代码 → React Native桥 → 原生组件 ↑ ↓ 状态更新 ← 消息传递 → 原生事件关键机制三个线程模型JavaScript线程运行你的业务逻辑原生UI线程处理UI渲染影子线程计算布局在后台异步通信JS和原生通过异步JSON消息通信避免阻塞虚拟DOM差异更新React的虚拟DOM机制在这里同样适用只更新变化的部分四、快速上手首先确保安装了Node.js然后# 安装React Native命令行工具npminstall-g react-native-cli# 创建新项目npx react-native init MyFirstApp# 运行iOS应用需要Mac和XcodecdMyFirstAppnpx react-native run-ios# 运行Android应用需要Android Studionpx react-native run-android现在看看自动生成的App.jsimportReactfromreact;import{View,Text,StyleSheet}fromreact-native;// 这和React组件语法几乎一样constApp(){return(View style{styles.container}Text style{styles.text}Hello,React Native!/Text/View);};// 样式采用类似CSS的写法但用的是JavaScript对象conststylesStyleSheet.create({container:{flex:1,justifyContent:center,alignItems:center,backgroundColor:#F5FCFF,},text:{fontSize:20,textAlign:center,margin:10,},});exportdefaultApp;在RN中我们用View代替了div用Text代替了span。这是因为移动端没有div和span这些Web概念。五、RN语法详解1. 组件差异对照表Web (React)React Native说明divView容器组件类似divspan/pText所有文本必须放在Text组件内imgImage图片组件用法略有不同inputTextInput文本输入框CSS样式StyleSheet对象样式写在JavaScript中2. 样式编写import{StyleSheet}fromreact-native;conststylesStyleSheet.create({container:{flex:1,// 类似 flex: 1flexDirection:row,// 类似 flex-direction: rowjustifyContent:center,// 类似 justify-content: centerbackgroundColor:#fff,// 背景色注意是驼峰命名paddingHorizontal:10,// 左右内边距Web中要写paddingLeft和paddingRight},title:{fontSize:18,// 字号没有px单位fontWeight:bold,// 字重color:#333,},});重要区别没有单位React Native中fontSize: 18就是18不是18px少数属性名不同如paddingHorizontal代替padding-left和padding-right没有CSS选择器样式直接绑定组件3. 布局核心Flexbox为主如果你熟悉CSS Flexbox那么RN的布局你会很好上手。很多布局需求都能用Flexbox解决。View style{{flex:1,flexDirection:row}}View style{{width:50,height:50,backgroundColor:red}}/View style{{flex:1,height:50,backgroundColor:blue}}//View4. 处理用户交互import{TouchableOpacity,Alert}fromreact-native;constMyButton(){consthandlePress(){Alert.alert(提示,你点击了按钮);};return(TouchableOpacity onPress{handlePress}style{styles.button}Text style{styles.buttonText}点击我/Text/TouchableOpacity);};注意RN中没有button使用TouchableOpacity、TouchableHighlight或Pressable。5. 列表渲染FlatList和SectionList对于长列表不要用map渲染所有项目使用RN优化的列表组件import{FlatList}fromreact-native;constdata[{id:1,title:第一条数据},{id:2,title:第二条数据},// ...更多数据];constMyList()(FlatList data{data}renderItem{({item})Text{item.title}/Text}keyExtractor{itemitem.id}/);六、原生模块当JavaScript能力不够时React Native的强大之处在于可以轻松调用原生功能// JavaScript端import{NativeModules}fromreact-native;// 调用原生模块NativeModules.MyNativeModule.doSomething();// 更常见的是使用社区封装好的库importGeolocationfromreact-native-community/geolocation;// 获取当前位置Geolocation.getCurrentPosition(infoconsole.log(info));几乎所有原生功能都有对应的React Native库相机、地理位置、推送通知、生物识别…七、热重载这是React Native受欢迎的重要原因之一热重载(Hot Reloading)修改代码后立即看到变化保持应用状态快速刷新(Fast Refresh)React Native 0.61的默认功能更稳定不需要经历“编译-部署-启动”的漫长等待保存文件就能看到更新八、使用场景该用React Native的场景初创公司需要快速推出MVP已有Web团队想扩展到移动端应用不需要大量复杂动画或特殊硬件功能需要代码复用可共享70-80%代码在iOS和Android间慎重考虑的场景游戏或需要复杂图形处理的应用需要深度定制原生UI或性能极致的应用严重依赖平台特定功能的app