React Native 入门 2

一些常用组件的介绍，React Native 毕竟使用 React 实现，所以写 RN 的代码其实和写 web 差不多，这里就不多介绍了。

唯一需要注意的一点就是，所有 RN 使用的组件都需要从 RN 导入，因为 RN 需要将代码编译成原生 ios/android 组件，所以没办法像网页版一样直接使用 div 这些组件。

下面提到的是这个 demo 里用到的组件：

StyleSheet

StyleSheet 是 RN 创建样式的部分，当然，也可以写行内样式，使用方法如下：

import { StyleSheet } from 'react-native';

const Demo = () => {
  return <View style={styles.screen}>Some Content Here</View>;
};

export default Demo;

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 24,
  },
});

RN 中的 StyleSheet 不是 CSS，StyleSheet 受到 CSS 的启发，并且算是一个 subset，但是 StyleSheet 不支持所有的 CSS 语法，并且 StyleSheet 也有特有的 android/ios 实现，比如说 elevation，是一个 android 特有的样式用于创造阴影（准确的说 MUI 里面定义的类似于两个物体之间在 z 轴上的的距离：Elevation）。

除此之外，RN 中所有的组件默认使用 flex，并且方向为 column。

⚠️：并不是所有的组件都能够接受 style 这个 prop，如 button 就不可以。

View

View 算是最常用的一个组件了，有点类似于万能的 div，是一种 container。

View 比较常用的是应用样式去实现一个 custom component，毕竟一些封装过的组件没有办法使用 style。

使用方法参考 StyleSheet。

Text

Text 会转化成原生的文字，有一个特点在于 Text 可以嵌套 Text 去应用样式，这也是仅有的几个 Text 可以嵌套的组件。

const Demo = () => {
  <Text style={styles.summaryText}>
    Your phone needed
    <Text style={styles.highlight}> {roundsNumber} </Text>
    rounds to ges the number
    <Text style={styles.highlight}> {userNumber} </Text>.
  </Text>;
};

渲染结果为：

本质上来说，RN 最终还是会将其编译成原生代码并应用样式。

Button

Button 是 RN 已经封装好的一个组件，使用方式如下：

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

需要注意的就是，Button 是封装好的组件，因此它无法接受 style。

Pressable

Pressable 是 RN 中的新组件，比较古早的实现是 Touchable，不过最新版本中 Touchable 好像已经被移除了。

使用方法如下：

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

根据官方文档的说法，Pressable 的另一个优势在于可以应用 HitRect，这样可以规定在两个 press 之间必须要有一段距离，可以防止误触碰。

View+Pressable 也可以实现 custom button，将 style 应用于 View 上，将具体实现的功能应用于 Pressable 上。

Image

渲染图片的组件，类似于 img，不过它的实现方法稍微有一些不一样：

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
};

如果是项目内的图片，那么就需要搭配 source={require()} 的语法，通过绝对路径/相对路径进行图片的导入。网络图片的使用方式与 img 类似，同时也可以使用 data source 进行图片的渲染。

Image 对于样式的适用不是特别好，因此大多数情况下还是会通过嵌套一个 View + {overflow: hidden;} 进行实现。

ImageBackground

类似于已经实现好的 background-img，其接受的 props 和 Image 一致。

ScrollView

如果文章内容比较长，使用 View 只会显示当前页面上可以展示的部分，这个时候可以选择 ScrollView 去实现一个向下滑动展示更多内容的部分。

在网页部分，如果 div 的高度是固定的，那么这个会自动实现，但是 native 不行。

应用场景多用于文章等有固定长度的内容，不适合 infinite scrolling。ScrollView 会将所有的内容全部渲染出来，包括不在当前视图中的内容，因此当需要渲染的内容量非常大的情况下，会有性能上的问题。

FlatList

当内容比较多，又是列表的时候，可以使用 FlatList 代替 ScrollView。FlatList 会计算当前视图内渲染的部分，并且会选择不渲染不在当前视图中的内容，因此性能方面会比 ScrollView 好很多。

使用方法如下：

const component = (
  <FlatList
    data={DATA}
    renderItem={({ item }) => <Item title={item.title} />}
    keyExtractor={(item) => item.id}
  />
);

SafeAreaView

SafeAreaView 是一个 ios 特有的组件，主要是为了适配 ios 的刘海，让渲染的内容在刘海以下的安全区域。