javascript - React ネイティブ フラットリスト、予期しない動作

Question

こんにちは、ListView の代わりに FlatList コンポーネントを使用し始めています。セパレーターをレンダリングしようとして問題が発生しています。複数選択コンポーネントを作成しましたが、問題なく動作していますが、なぜセパレーターがレンダリングされないのかわかりませんフラットリスト、renderItem関数内にセパレーターを配置すると問題なく動作しますが、フラットリストから小道具として使用したいです。

興味深いのは、render メソッドで FlatList から itemSeparatorComponent prop を削除すると、コンポーネントが項目が選択されていることを示すチェックマーク (renderIndicator()) の更新を停止することです。これは非常に面倒です。コード全体を入れて確認してください。

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'
  }
};