帶有單選按鈕的 React Native Flatlist 工作緩慢

Question

我有帶有自定義單選按鈕實現的平面列表，但是當我點擊平面列表項目時，它會等待大約一秒鍾，然后才會更改為活動按鈕。 我嘗試將 Callback 與我的renderItem和itemKeyExtractor函數一起使用，但它對我沒有幫助。

這是我的屏幕組件的代碼：

export const PickOrganizationScreen = (props) => {
  const { navigation, setOrganization, loadProcedureProviders, items, isLoading, procedureId, organizationId } = props;

  useFocusEffect(
    React.useCallback(()=>{loadProcedureProviders(procedureId);},[loadProcedureProviders, procedureId])
  );

  const renderItem = ({item}) => {
    return (
    <OrganizationItem
      title={item.Title}
      checked = {item.Id === organizationId}
      onPress={() => {
        setOrganization(item.Id, item.Title);
      }}
    />);
  };

  const itemKeyExtractor = (item) => item.Id;

  return (
    isLoading ? (
      <Spinner />
    ) : (
      items.length > 0 ? (
        <View style={styles.container}>
          <View style={styles.paragraph}>
            <Text style={styles.subtitle}>{I18n.t('pickOrganization')}</Text>
          </View>
          <View style={styles.alertMessage}>
            <View style={styles.alertIcon}>
              <Icon name="info" width={32} height={32} fill={Colors.primaryRed} />
            </View>
            <View>
              <Text style={styles.alertText}>{I18n.t('pickOrganizationToRegisterService')}</Text>
            </View>
          </View>

          <FlatList
            data = {items}
            renderItem = {renderItem}
            keyExtractor = {itemKeyExtractor}
            extraData={organizationId}
          />

          <View style={styles.buttonWrapper}>
            <ScreenButton
              title={I18n.t('goToRegister')}
              onPress={ () => {
                navigation.navigate('ServiceSummary');
              }}/>
          </View>
        </View>
        ) : (
          <NotFound extraText={I18n.t('notFoundExtra')}/>
        )
     )
  );
};

這是 flatlist item 組件的代碼：

export const OrganizationItem = ({title, checked, onPress}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.itemContainer}>
        <View style={styles.itemIcon}>
          { checked ? (
              <Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
            ) :
            (
              <Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
            )
          }
        </View>
        <View style={styles.itemText}>
          <Text style={styles.title}>{title}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

Answer 1

嘗試記憶 OrganizationItem。 OrganizationItem 中的 onPress 是否更改項目 object？ 如果是這樣，即使進行了一個小的更改，它也會重新渲染整個平面列表。 如果你記憶，除非傳遞給它的道具發生變化，否則記憶的組件不會重新呈現。

   export const OrganizationItem = React.memo(({title, checked, onPress}) => {
   return (
<TouchableOpacity onPress={onPress}>
  <View style={styles.itemContainer}>
    <View style={styles.itemIcon}>
      { checked ? (
          <Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
        ) :
        (
          <Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
        )
      }
    </View>
       <View style={styles.itemText}>
         <Text style={styles.title}>{title}</Text>
       </View>
     </View>
   </TouchableOpacity>
   );
 });