組件及aoi - 簡書

常用標簽

Text

內(nèi)部的元素不再使用 flexbox 布局犹菱，而是采用文本布局
<View>下不能直接放一段文本

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

屬性：

selectable（bool）：決定用戶是否可以長按選擇文本诸衔，以便復(fù)制和粘貼禾进。
onPress
ellipsizeMode：通常和下面的 numberOfLines 屬性配合使用，表示當 Text 組件無法全部顯示需要顯示的字符串時如何用省略號進行修飾般妙。
head - 從文本內(nèi)容頭部截取顯示省略號陈哑。例如： "...efg"
middle - 在文本內(nèi)容中間截取顯示省略號合瓢。例如： "ab...yz"
tail - 從文本內(nèi)容尾部截取顯示省略號。例如： "abcd..."
clip - 不顯示省略號杨凑，直接從尾部截斷滤奈。
numberOfLines（number）：當文本過長的時候裁剪文本

Button

屬性：

onPress 用戶點擊此按鈕時所調(diào)用的處理函數(shù)
title 按鈕內(nèi)顯示的文本
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 : 屬性是指背景是否透明蜒程，默認為白色绅你，將這個屬性設(shè)為：true 的時候彈出一個透明背景層的 modal。
onRequestClose: 回調(diào)會在用戶按下 Android 設(shè)備上的后退按鍵或是 Apple TV 上的菜單鍵時觸發(fā)昭躺。請務(wù)必注意本屬性在 Android 平臺上為必填忌锯，且會在 modal 處于開啟狀態(tài)時阻止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)}  // 使用箭頭函數(shù)而非 bind 的方式進行綁定,不會在每次列表重新 render 時生成一個新的函數(shù)
        style={{ backgroundColor }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId} // 保證state.selected變化時葱峡，能夠正確觸發(fā)FlatList的更新啄枕。如果不指定，則不會觸發(fā)更新族沃，因為它是一個PureComponent频祝，其 props 在===比較中沒有變化則不會觸發(fā)更新。
      />
    </SafeAreaView>
  );
};

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

export default App;

屬性：

renderItem 從data中挨個取出數(shù)據(jù)并渲染到列表中

renderItem({ item, index, separators });

separators(Object) :

highlight (Function)
unhighlight (Function)
updateProps (Function)
select (enum('leading', 'trailing'))
newProps (Object)
data
只支持普通數(shù)組脆淹，如 immutable 數(shù)組常空，請直接使用更底層的VirtualizedList`組件。
horizontal
設(shè)置為 true 則變?yōu)樗讲季帜Ｊ?
numColumns
只能在非水平模式下使用列布局
onRefresh
下拉刷新 () => void
keyExtractor
此函數(shù)用于為給定的 item 生成一個不重復(fù)的 key盖溺，
減少重新渲染的開銷漓糙。若不指定此函數(shù)，則默認抽取item.key作為 key 值烘嘱。若item.key也不存在昆禽，則使用數(shù)組下標。
ItemSeparatorComponent
行與行之間的分隔線組件蝇庭。不會出現(xiàn)在第一行之前和最后一行之后
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"
  },

優(yōu)化性質(zhì)的標簽

ActivityIndicator

圓形的 loading 提示符號

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

屬性：

color
iOS 上默認為灰色，安卓上默認為深綠色
animating
是否要顯示指示器動畫哮内，默認為 true 表示顯示盗棵，false 則隱藏。
size
默認為'small'北发。目前只能在 Android 上設(shè)定具體的數(shù)值纹因。
hidesWhenStopped
在animating為 false 的時候，是否要隱藏指示器（默認為 true）琳拨。
如果animating和hidesWhenStopped都為 false瞭恰，則顯示一個靜止的指示器。

SafeAreaView (iOS 11^)

自動根據(jù)系統(tǒng)的各種導(dǎo)航欄狱庇、工具欄等預(yù)留出空間來渲染內(nèi)部內(nèi)容惊畏。
考慮到設(shè)備屏幕的局限是牢，需要避免內(nèi)容渲染到不可見的“劉海”范圍內(nèi)陕截。

可放置元素的最外層

KeyboardAvoidingView

解決問題：手機上彈出的鍵盤常常會擋住當前的視圖