React NativeRN采用JavaScript编写应用逻辑利用React框架构建UI。在运行时RN通过桥接机制将JavaScript代码与原生平台代码进行通信。对于iOS和AndroidRN分别有对应的原生渲染引擎。在iOS上它利用iOS的原生UI组件和API在Android上则使用Android的原生UI组件和API。这样RN代码在不同平台上可以调用各自平台的原生能力实现界面渲染和功能交互。当开发者编写一个按钮组件时RN会根据当前运行的平台将这个按钮渲染为iOS风格或Android风格的原生按钮。这一过程中RN的桥接机制起到关键作用它负责将JavaScript层的指令传递给原生层同时将原生层的事件和数据反馈给JavaScript层。React Native UI 组件Android 原生视图iOS 原生视图Web 标签说明ViewViewGroupUIViewA non-scrollingdiv不支持滚动支持flexbox、触摸处理和无障碍性控件的容器TextTextViewUITextViewp显示、样式和嵌套文本字符串甚至处理触摸事件ImageImageViewUIImageViewimg显示不同类型的图片ScrollViewScrollViewUIScrollViewdiv一个通用的滚动容器可以包含多个组件和视图,适合用来显示数量不多的滚动元素立即渲染所有元素TextInputEditTextUITextFieldinput typetext使用户可以输入文本FlatList显示较长的滚动列表,性能更好垂直的滚动列表其中的元素之间结构近似而仅数据不同FlatList并不立即渲染所有元素而是优先渲染屏幕上可见的元素SectionList可以分组的listReact基础components 组件、JSX、props 属性、state 状态Function Compomentsimport React from react;import { Text } from react-native;const Cat () {// 这个函数的返回值就会被渲染为一个 React 元素return (TextHello, I am your cat!/Text);}// 使用了export default语句来导出这个组件以使其可以在其他地方引入使用export default Cat;Class Compomentsimport React, { Component } from react;import { Text } from react-native;// 定义组件首先要继承(extends)自Componentclass Cat extends Component {// Class 组件必须有一个render()函数它的返回值会被渲染为一个 React 元素render() {return (TextHello, I am your cat!/Text);}}export default Cat;JSX: JavaScript XML一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖也是react.js的使用基础。React在不使用JSX的情况下一样可以工作然而使用JSX可以提高组件的可读性// 使用JSrender:function (){return React.createElement(div, {className: divider},Label Text,React.createElement(hr));}// 使用JSXrender:function (){return div classNamedividerLabbel Texthr//div}在 React Native 0.71 版本之前JSX 语法糖的实质是调用React.createElement方法所以你必须在文件头部引用import React from react。但在 React Native 0.71 版本之后官方引入了新的 JSX 转换可以不用再在文件头部写import React from react。Props是“properties”属性的简写。Props 使得我们可以定制组件import React from react;import { Text, View } from react-native;const Cat (props) {return (ViewTextHello, I am {props.name}!/Text/View);}const Cafe () {return (ViewCat nameMaru /Cat nameJellylorum /Cat nameSpot //View);}export default Cafe;State 状态如果把 props 理解为定制组件渲染的参数 那么state就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。Function Componentsimport React, { useState } from react;import { Button, Text, View } from react-native;const Cat (props) {const [isHungry, setIsHungry] useState(true);return (ViewTextI am {props.name}, and I am {isHungry ? hungry : full}!/TextButtononPress{() {setIsHungry(false);}}disabled{!isHungry}title{isHungry ? Pour me some milk, please! : Thank you!}//View);}const Cafe () {return (Cat nameMunkustrap /Cat nameSpot //);}export default Cafe;Class Componentsimport React, { Component } from react;import { Button, Text, View } from react-native;class Cat extends Component {state { isHungry: true };render() {return (ViewTextI am {this.props.name}, and I am{this.state.isHungry ? hungry : full}!/TextButtononPress{() {this.setState({ isHungry: false });}}disabled{!this.state.isHungry}title{this.state.isHungry ? Pour me some milk, please! : Thank you!}//View);}}class Cafe extends Component {render() {return (Cat nameMunkustrap /Cat nameSpot //);}}export default Cafe;Platform 模块React Native 提供了一个检测当前运行平台的模块Platform.OS在 iOS 上会返回ios而在 Android 设备或模拟器上则会返回androidPlatform.select()它可以以 Platform.OS 为 key从传入的对象中返回对应平台的值import {Platform, StyleSheet} from react-native;const styles StyleSheet.create({height: Platform.OS ios ? 200 : 100,});Platform.Version // Android 版本、iOS 版本特定平台后缀当不同平台的代码逻辑较为复杂时最好是放到不同的文件里这时候我们可以使用特定平台后缀。React Native 会检测某个文件是否具有.ios.或是.android.的后缀然后根据当前运行的平台自动加载正确对应的文件。BigButton.ios.jsBigButton.android.jsimport BigButton from ./BigButton; // 去掉平台后缀直接引用