React Native学习笔记

React Native 是由 Facebook（现 Meta）开发的开源移动应用框架，用于使用 JavaScript 和 React 构建真正的原生移动应用（iOS 和 Android）

跨平台开发：用一套 JavaScript 代码同时生成 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 watchman

Xcode(相当于Android Studio)，>=10,appstore安装

Cocoapods（类似于npm）：brew install cocoapods

初始化项目：

react-native init myApp // 创建项目

cd myApp

yarn android、yarn ios // 启动项目

vs Code插件：ES7 React/Redux/GraphQL/ReactNative/JS snippets

使用快捷键：rnc（react native class）生成rn 类组件

使用快捷键：rnf（react native function）生成rn 函数组件

调试工具：

1.模拟器调试:

模拟器一般是根据Android Studio和Xcode一起安装的,启动应用模拟器会一起启动

点击模拟器，使模拟器获取焦点

快捷键：ctrl+m、command+m  选debug

自动跳转到浏览器，可以使用web调试的方式去调试

2.真机调试：

打开usb调试模式，通过usb线将电脑和手机连接，启动应用，在手机上安装应用

基础语法

React：jsx语法Redux，常用安装包，生命周期

组件和api

路由和导航

 RN CSS（StyleSheet样式表/ˈstaɪl ʃiːt/）

RN样式的声明方式：

1.style属性直接声明

属性为对象:<组件 style = { {} } />

属性为数组:<组件 style = { [{},{}] } />

2.在style属性中调用styleSheet声明的样式、

import {StyleSheet} from 'react-native'

const styles = StyleSheet.create({

        foo:{样式2，样式2..}

})

<View style ={[style.foo]}>内容</View>

rn中的样式没有继承，只发生在text组件中，样式采用小驼峰，尺寸没有单位

特殊样式名：marginHorizontal（水平外边距），marginVertical（垂直外边距）

rn样式的声明方式是通过style属性直接声明，如果有样式重叠，后边的会覆盖前边的

Dimensions

获取屏幕尺寸：Dimensions：维度/daɪˈmenʃ(ə)nz/

import { Dimensions } from 'react-natuve'

const windowsWith = Dimensions.get('windows').width

const windowsHeight = Dimensions.get('windows').height

Platform

import { Platform } from 'react-native'

Platform.OS === 'android'  // Android设备的判断

Platform.OS === 'ios'   // ios设备的判断

flexbox

flexDirection（声明主轴方向）： 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有效

        color="red"

Image 图片组件

        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} // 多行输入框的行数

        textAlignVertical="top" // 输入框的垂直对齐方式

Touchable 触碰组件（3个）

        TouchableHighlight 触碰后高亮显示

        TouchableOpacity 触碰后透明度降低（模糊）

        TouchableWithoutFeedback 触碰后无任何响应

ScrollView 滚动视图组件

        View组件超出容器不会滚动，需要使用ScrollView组件

        contentContainerStyle={{}} // 文字样式

        showVerticalScrollIndicator = {false} // 隐藏滚动条

        horizontal= {true} // 水平滚动

        ScrollView在Android滚动不到底部

        需要单独加一个<View style={{ height：Platform.OS==="ios" ? 0 : 100 }}

SectionList 分组列表组件

FlatList 高性能列表组件

Animated 动画组件

架构原理

页面开发环境配置和使用

页面发布