javascript - react native 平面列表，不是预期的行为

Question

嗨，我开始使用 FlatList 组件而不是 ListView，在尝试渲染分隔符时遇到一些问题，我制作了一个多选组件，它工作正常，但我不明白为什么它不渲染平面列表中的分隔符，如果我将分隔符放在 renderItem 函数中，它可以正常工作，但我想将平面列表中的分隔符用作 Prop 。

一件奇怪的事情是，如果我在 render 方法中从 FlatList 中删除 itemSeparatorComponent 属性，组件就会停止更新指示该项目被选中的复选标记 (renderIndicator())，所以这真的很烦人，我把整个代码都放在了检查一下。

native react :0.44.0

import React, { Component } from 'react';
import { Button, Icon, Divider } from 'react-native-elements';
import { FlatList, View, TouchableOpacity, Text } from 'react-native';
import { Card, CardSection } from './commons';
import { appMainColor } from '../constants';

export default class ListOrderItems extends Component {
  static navigationOptions = {
    title: 'Realice su selección'
  };

  state = { selected: [], items: this.props.navigation.state.params.items };

  onItemPress = (item) => {
    const selected = this.state.selected;
    const index = selected.indexOf(item.name);

    if (index === -1) {
      selected.push(item.name);
    } else {
      selected.splice(index, 1);
    }

    this.setState({ selected });
  };

  isSelected = (item) => {
    return this.state.selected.indexOf(item.name) !== -1;
  };

  keyExtractor = (item, index) => {
    return index;
  };

  renderOkButton = () => {
    if (this.props.navigation.state.params.type === 'multipleChoice') {
      return (
        <Button
          raised
          borderRadius={5}
          backgroundColor={appMainColor}
          title='Aceptar'
          onPress={() => this.props.navigation.goBack()}
        />
      );
    }
  };

  renderCancelButton = () => {
    return (
      <Button
        raised
        borderRadius={5}
        backgroundColor={appMainColor}
        title='Cancelar'
        onPress={() => this.props.navigation.goBack()}
      />
    );
  };

  renderIndicator = (item) => {
    if (this.isSelected(item)) {
      return <Icon name="check-circle" color={appMainColor} />;
    }
  };

  renderSeparator = () => {
    return <Divider />;
  };

  renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => this.onItemPress(item, index)}
      >
        <View style={styles.row}>
          <View style={styles.optionLabel}>
            <Text>{item.name} (${item.price})</Text>
          </View>
          <View style={styles.optionIndicator}>
            {this.renderIndicator(item, index)}
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View>
        <Card>
          <CardSection>
            <FlatList
              data={this.state.items}
              keyExtractor={this.keyExtractor}
              renderItem={this.renderItem}
              itemSeparatorComponent={() => this.renderSeparator()}
            />
          </CardSection>
        </Card>
        <Card>
          <CardSection style={{ justifyContent: 'space-around' }}>
            {this.renderOkButton()}
            {this.renderCancelButton()}
          </CardSection>
        </Card>
      </View>
    );
  }
}

const styles = {
  row: {
    flexDirection: 'row',
    padding: 5
  },
  optionLabel: {
      flex: 1,
  },
  optionIndicator: {
      width: 30,
      height: 30,
      justifyContent: 'center',
      alignItems: 'center'
  }
};

Answer 1

我认为您犯了一些拼写错误，它应该是 ItemSeparatorComponent，而不是 itemSeparatorComponent。