2

您好我开始使用 FlatList 组件而不是 ListView 并且在尝试呈现分隔符时遇到了一些问题，我制作了一个多选组件并且它工作正常，但我不明白为什么它没有从flatlist，如果我将分隔符放在 renderItem 函数中，它可以正常工作，但我想将 flatlist 中的它用作道具。

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

反应原生：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'
  }
};
4

2 回答 2

1

我想你打错了，应该是ItemSeparatorComponent，不是itemSeparatorComponent。

于 2017-06-03T03:19:10.380 回答
0

Flatlist 列表项是纯组件，如果要检查，则应在传入的数据源中进行设置。否则，该项目的道具保持不变，并且组件不会重新渲染。

对于分频器，你可以试试itemSeparatorComponent={Divider}

于 2017-06-03T01:07:32.073 回答