Question

以下是我的平面列表代码

render() {
   console.log("chatthread --",this.props.chatThreadStore.getchatThreads);
   const { navigate } = this.props.navigation;
   return (
        <View style={ChatThreadStyle.container}>
            <FlatList
                data={this.props.chatThreadStore.getchatThreads}
                renderItem={({ item,index }) => this.renderFlatList(Object.keys(item).toString(),Object.values(item).toString())}
                keyExtractor={(item, index) => index}
                inverted={true}   
            />
        </View>
    );
}

renderFlatList(time,message) {
    console.log("time--",time);
    unixTime=convertFireBaseTimeToUnix(time);
return (
        <ListItem
            hideChevron={true}
            containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}
            title={<View>
                <View style={ChatThreadStyle.containerText}>
                    <Text style={ChatThreadStyle.textContent}>{moment.unix(unixTime).format('lll')}</Text>
                </View>
                <View style={ChatThreadStyle.titleContainer} >
                    <Text style={ChatThreadStyle.titleStyle}>{message}</Text>
                </View>
            </View>
            }


        />
    )
}

以下是传递给FlatList的数据

Array [
  Object {
    "1509964621958": "Hey! the Good the bad and the ugly",
  },
  Object {
    "1509964820253": "The prisoners 2010",
  },
  Object {
    "1509965207453": "The Rocky!!",
  },
]

我的清单不是反过来的。当我使用invert = {true}标志或省略倒置标志时，我得到相同的输出。

Answer 1

仅使用倒置，倒置= {true}是坏的！像这样：

<FlatList
    inverted         
    data={this.props.chatThreadStore.getchatThreads}

/>

Answer 2

我相信，在本机版本0.47之后添加了反向道具。

倒置的Flatlist不适用于React Native

2 个答案: