组件及aoi

常用标签

Text

内部的元素不再使用 flexbox 布局，而是采用文本布局
<View>下不能直接放一段文本

// 正确的做法
<View>
  <Text>
    一些文本
  </Text>
</View>

属性：

selectable（bool）：决定用户是否可以长按选择文本，以便复制和粘贴。
onPress
ellipsizeMode：通常和下面的 numberOfLines 属性配合使用，表示当 Text 组件无法全部显示需要显示的字符串时如何用省略号进行修饰。
head - 从文本内容头部截取显示省略号。例如： "...efg"
middle - 在文本内容中间截取显示省略号。例如： "ab...yz"
tail - 从文本内容尾部截取显示省略号。例如： "abcd..."
clip - 不显示省略号，直接从尾部截断。
numberOfLines（number）：当文本过长的时候裁剪文本

Button

属性：

onPress 用户点击此按钮时所调用的处理函数
title 按钮内显示的文本
color 文本的颜色(iOS)，或是按钮的背景色(Android)

Modal

 const [modalVisible, setModalVisible] = useState(false);
  <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        }}
      >

属性：

visible : 属性决定 modal 是否显示。
transparent : 属性是指背景是否透明，默认为白色，将这个属性设为：true 的时候弹出一个透明背景层的 modal。
onRequestClose: 回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
animationType
animationType指定了 modal 的动画类型。
slide 从底部滑入滑出。
fade 淡入淡出。
none 没有动画，直接蹦出来。

FlatList

简单列表组件
功能：

支持水平，多列布局模式
支持下拉刷新
支持上拉加载
...

import React, { useState } from "react";
import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity } from "react-native";

const DATA = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
    title: "First Item",
  },
  {
    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
    title: "Second Item",
  }
];

const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
    <Text style={styles.title}>{item.title}</Text>
  </TouchableOpacity>
);

const App = () => {
  const [selectedId, setSelectedId] = useState(null);

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}  // 使用箭头函数而非 bind 的方式进行绑定,不会在每次列表重新 render 时生成一个新的函数
        style={{ backgroundColor }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId} // 保证state.selected变化时，能够正确触发FlatList的更新。如果不指定，则不会触发更新，因为它是一个PureComponent，其 props 在===比较中没有变化则不会触发更新。
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
...
});

export default App;

属性：

renderItem 从data中挨个取出数据并渲染到列表中

renderItem({ item, index, separators });

separators(Object) :

highlight (Function)
unhighlight (Function)
updateProps (Function)
select (enum('leading', 'trailing'))
newProps (Object)
data
只支持普通数组，如 immutable 数组，请直接使用更底层的VirtualizedList`组件。
horizontal
设置为 true 则变为水平布局模式,
numColumns
只能在非水平模式下使用列布局
onRefresh
下拉刷新 () => void
keyExtractor
此函数用于为给定的 item 生成一个不重复的 key，
减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为 key 值。若item.key也不存在，则使用数组下标。
ItemSeparatorComponent
行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后
ListEmptyComponent
列表为空时渲染该组件，可以是component, function, element

Image

  <Image
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

ImageBackground

  <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>

...
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },

优化性质的标签

ActivityIndicator

圆形的 loading 提示符号

 <ActivityIndicator size="large" color="#0000ff" />

属性：

color
iOS 上默认为灰色，安卓上默认为深绿色
animating
是否要显示指示器动画，默认为 true 表示显示，false 则隐藏。
size
默认为'small'。目前只能在 Android 上设定具体的数值。
hidesWhenStopped
在animating为 false 的时候，是否要隐藏指示器（默认为 true）。
如果animating和hidesWhenStopped都为 false，则显示一个静止的指示器。

SafeAreaView (iOS 11^)

自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。
考虑到设备屏幕的局限，需要避免内容渲染到不可见的“刘海”范围内。

可放置元素的最外层

KeyboardAvoidingView

解决问题：手机上弹出的键盘常常会挡住当前的视图