资料

• 官网：https://reactnative.dev/ (opens new window)

组件

原生组件

在 Android 开发中，视图通常使用 Kotlin 或 Java 编写；在 iOS 开发中，则使用 Swift 或 Objective-C。而使用 React Native，你可以利用 React 组件通过 JavaScript 调用这些视图。在运行时，React Native 会为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件与 Android 和 iOS 组件使用相同的视图，因此 React Native 应用的外观、体验和性能与其他应用并无二致。我们将这些平台支持的组件称为原生组件。

核心组件

React Native UI 组件	Android 原生视图	iOS 原生视图	Web 标签
<View>	<ViewGroup>	<UIView>	A non-scrolling  <div>
<Text>	<TextView>	<UITextView>	<p>
<Image>	<ImageView>	<UIImageView>	<img>
<ScrollView>	<ScrollView>	<UIScrollView>	<div>
<TextInput>	<EditText>	<UITextField>	<input type="text">

特定平台代码

参考：Introduction · React Native (opens new window) React Native 提供了两种方法来区分平台：

• 使用 Platform 模块.
• 使用特定平台后缀.

Platform 模块

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  // `Platform.OS`在 iOS 上会返回`ios`，而在 Android 设备或模拟器上则会返回`android`
  height: Platform.OS === 'ios' ? 200 : 100,
});

Platform.select() ：

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue',
      },
    }),
  },
});

特定平台后缀

BigButton.ios.js
BigButton.android.js

环境搭建