反應原生flatlist，不是預期的行爲

嗨我開始使用FlatList組件而不是ListView，我有一些問題，試圖呈現分隔符，我做了一個多選組件，它工作正常，但我不明白爲什麼它沒有從平面列表中呈現分隔符，如果我將分隔符放在renderItem函數內，它的工作正常，但我想從平面列表中使用它作爲道具。反應原生flatlist，不是預期的行爲

一個好奇的是，如果我在render方法中從FlatList中刪除itemSeparatorComponent prop，組件停止更新指示該項被選中的複選標記（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' 
    } 
};

來源

2017-06-02 Grunch