带有单选按钮的 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>
   );
 });