Я пытаюсь отобразить список из ~ 250 изображений в 3 столбца, используя FlatList в RN0.43, и я изменяю ширину изображений в функции onLayout FlatList, чтобы соответствовать ширине экрана.
Первоначальная производительность в порядке, но после некоторой прокрутки вверх / вниз иногда требуется секунда или 2, пока не появятся изображения.
еще хуже, если я перейду на ориентацию экрана, обновление экрана займет 2–3 секунды.
несколько выводов:
после поворота экрана требуется секунда или 2, пока не будет вызван FlatList.onLayout
после FlatList.onLayout и обновления ширины изображения каждое изображение (примерно половина списка, ~ 150 изображений; пока показано только ~ 15) визуализируется 2 ~ 4 раза, а render () вызывается только один раз.
вопрос:
- как я могу изменить код для повышения производительности?
- в getItemLayout () многоколоночного списка должно ли смещение быть чем-то вроде (itemHeight + separatorHeight) * (index% numColumns)?
Спасибо.
протестировано на: GalaxySII (4.1.2) и эмуляторе Android SDK (7.1.1)
var data = [
require('./res/img/Search.png'),
require('./res/img/test - Copy.png'),
// ~250 items
...];
class app extends React.Component {
renderItem (info, width) {
console.log('renderItem', info.index);
if(width !== this.width) {
this.imageStyle = {width: width-MarginHorizontal , height: width-MarginHorizontal, resizeMode: 'contain'};
}
return (
<Image
source = {info.item}
key = {info.index}
style={this.imageStyle}/>
);
}
render() {
console.log('Test.render');
return (
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#F5FCFF'
}}>
<GridList
numColumns={3}
columnWrapperStyle={{ alignItems: 'center', marginVertical: 5, justifyContent: 'space-around'}}
data={data}
renderItem={this.renderItem}
/>
</View>
);
}
}
class GridList extends Component {
onLayout(event) {
console.log('GridList.onLayout()');
let newColumnWidth = event.nativeEvent.layout.width/ this.numColumns;
this.layout = Object.assign({},event.nativeEvent.layout);
if( undefined === this.columnWidth || Math.abs(newColumnWidth - this.columnWidth) > WidthTolerance ) {
this.columnWidth = newColumnWidth;
if(this.isComponentMounted) {
this.setState({renderCount: this.state.renderCount+1});
} else {
this.state.renderCount +=1;
}
}
}
render() {
console.log('GridList.render()');
return (
<FlatList
{...(this.modifiedProps)}
renderItem={(info) => { return this.props.renderItem(info, this.columnWidth); }}>
{this.props.children}
</FlatList>
);
}
}
0.45.1
, есть ли прогресс? - person sooper   schedule 03.07.2017