ReactNative由Facebook现 Meta开发的开源移动应用框架用于使用JS和React构建真正的原生移动应用iOS 和 Android跨平台开发用一套JS代码同时生成iOS和Android应用复用率可达 70%~90%原生性能通过桥接机制Bridge 将 JS 代码编译为原生组件非 WebView直接调用平台原生 API如相机、GPS体验接近纯原生应用热重载Hot Reloading修改代码后实时预览效果无需重新编译整个应用大幅提升开发效率调试周期缩短 50% 以上搭建开发环境基础环境node.js(12)、yarn、react-natie-cli(保障js代码可以正常使用)mac可以搭建安卓和ios的开发环境但是windows只能搭建Android环境搭建安卓环境安装jdk(java SE Development Kit)版本必须是1.8安装Android Studio需要翻墙启动需要安装组件大概2G,比较慢安装 Android SDK(针对安卓开发的套件虽然Android Studio会默认安装最新版本的Android SDK,但是目前编译React Native需要Android10版本的SDK)安装方式打开Android Studio在菜单Tools下找到SDK Manager配置环境变量ANDROID_HOME搭建IOS环境Watchman brew install watchmanXcode(相当于Android Studio)10,appstore安装Cocoapods类似于npmbrew install cocoapods初始化项目react-native init myApp // 创建项目cd myAppyarn android、yarn ios // 启动项目vs Code插件ES7 React/Redux/GraphQL/ReactNative/JS snippets使用快捷键rncreact native class生成rn 类组件使用快捷键rnfreact native function生成rn 函数组件调试工具1.模拟器调试:模拟器一般是根据Android Studio和Xcode一起安装的,启动应用模拟器会一起启动点击模拟器使模拟器获取焦点快捷键ctrlm、commandm 选debug自动跳转到浏览器可以使用web调试的方式去调试2.真机调试打开usb调试模式通过usb线将电脑和手机连接启动应用在手机上安装应用基础语法Reactjsx语法Redux常用安装包生命周期组件和api路由和导航RN CSSRN样式的声明方式1.style属性直接声明属性为对象:组件 style { {} } /属性为数组:组件 style { [{},{}] } /2.在style属性中调用styleSheet声明的样式、import {StyleSheet} from react-nativeconst styles StyleSheet.create({foo:{样式2样式2..}})View style {[style.foo]}内容/Viewrn中的样式没有继承只发生在text组件中样式采用小驼峰尺寸没有单位特殊样式名marginHorizontal水平外边距marginVertical垂直外边距rn样式的声明方式是通过style属性直接声明如果有样式重叠后边的会覆盖前边的Dimensions获取屏幕尺寸Dimensions维度/daɪˈmenʃ(ə)nz/import { Dimensions } from react-natuveconst windowsWith Dimensions.get(windows).widthconst windowsHeight Dimensions.get(windows).heightPlatformimport { Platform } from react-nativePlatform.OS android // Android设备的判断Platform.OS ios // ios设备的判断flexboxflexDirection声明主轴方向 row(web默认) | column(rn默认)justifyContent声明项目在主轴的对齐方式alignItems声明项目在交叉轴的对齐方式flex声明项目在主轴的尺寸比例RN核心组件View 视图组件(SafeAreaView兼容刘海屏的展示可替换View组件)Text 文本组件Alert 警告框组件Button 按钮组件:title:按钮文案onPress:点击事件Switch 开关组件trackColor{{false: red, true: green}} //背景色thumbColor{blue} // 开关圆点的颜色StatusBar 状态栏组件hidden{ture} // 关闭状态条backgroundColor: red仅在Android下有效barStyle {light-content}ActivityIndicator 加载指示器组件Android和ios展示效果不同size{large | samll | 70} //数字指定大小只在Android有效colorredImage 图片组件source { require(./images/1.jpg) }source {{ uri: https://....png }}TextInput 输入框组件placeholder请输入value { this.state.username }onChangeText {(val) {this.setState({username: val})}}secureTextEntry {true} // 密码框输入 secure /sɪˈkjʊə(r)/ :安全的numberOfLines {5} // 多行输入框的行数textAlignVerticaltop // 输入框的垂直对齐方式Touchable 触碰组件3个TouchableHighlight 触碰后高亮显示TouchableOpacity 触碰后透明度降低模糊TouchableWithoutFeedback 触碰后无任何响应ScrollView 滚动视图组件View组件超出容器不会滚动需要使用ScrollView组件contentContainerStyle{{}} // 文字样式showVerticalScrollIndicator {false} // 隐藏滚动条horizontal {true} // 水平滚动ScrollView在Android滚动不到底部需要单独加一个View style{{ heightPlatform.OSios ? 0 : 100 }}SectionList 分组列表组件FlatList 高性能列表组件Animated 动画组件架构原理页面开发环境配置和使用页面发布