我想获取具有工作行的flexDirection的SectionList,这是我拥有atm的代码:
const { width, height } = Dimensions.get('window');
// Amount of posters in a row
const columns = 3;
class Posters extends Component {
_renderItems = ({ item, index }) => {
return (
<TouchableOpacity
style={styles.container}
onPress={() => this._getMovieInfo(item.hasPerformances[0].filmId)}
key={index}
>
<View style={styles.imageContainer}>
<Image source={{ uri: item.posterUrl }} style={styles.image} />
</View>
<Text style={styles.title} numberOfLines={1}>{item.title}</Text>
</TouchableOpacity>
);
}
_getMovieInfo(url) {
this.props.movieDataChanged(url);
this.props.popupChanged(true);
}
_renderSections(array) {
return (
<SectionList
style={{ alignSelf: 'flex-start', flexDirection: 'row' }}
renderItem={this._renderItems}
renderSectionHeader={({ section: { name } }) => (
<View style={{ width, maringBottom: 8 }}>
<Text style={styles.releaseStyle}>{name}</Text>
</View>
)}
sections={array}
keyExtractor={(item, index) => item + index}
/>
);
}
render() {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{
this.props.posterData
? this._renderSections(this.props.posterData)
: <View style={styles.loadingStyle}><ActivityIndicator size="small" color={colors.typography} /></View>
}
</View>
);
}
}
export default connect(null, { movieDataChanged, popupChanged })(Posters);
但是,我想像网格一样将封面彼此相邻显示。我得到了使用map方法的帮助,但是由于性能问题(延迟加载),我想更改它,有人可以帮忙吗?