Question

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

奇怪的是，如果我在render方法中从FlatList中删除itemSeparatorComponent prop，那么组件会停止更新指示该项被选中的复选标记（renderIndicator（）），所以它真的很烦人，我把它放了整个代码，请检查。

React native：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。

Answer 2

如果要选中要检查的单元列表项是纯组件，则应在传入的数据源中设置此项。否则项的道具保持不变，组件将不会重新呈现。

对于分隔符，您可以尝试itemSeparatorComponent = {Divider}

反应原生扁平列表，而不是预期的行为

2 个答案: