Реагируйте на проблему с предшествующим исполнением Native FlatList с 400+. json - PullRequest
Новая
       7

Реагируйте на проблему с предшествующим исполнением Native FlatList с 400+. json

0 голосов
/ 08 января 2020

У меня есть некоторые проблемы с preformance с FlatList. Идея состоит в том, чтобы отобразить список песен в виде плоского списка. Список имеет 2 столбца, со значком закладки и заголовком.

При нажатии на элемент списка я перехожу на другой маршрут, передавая текст песни из JSON в качестве параметра. На этом маршруте я просто отображаю текст песни

Json структура файла:

[{"number":"1","title":"some title","text":"some text"},{...},{...}]

Обзор приложения:

Я импортирую JSON файл: import Songs from '../db/songs.json'; (Песня содержит 400+ объектов внутри)

renderItem() функция: 

renderItem = (title, text) => {
    let newTitle = title;
    if (title.length > 38) {
      newTitle = title.substr(0, 38) + '...';
    }
    return (
      <View style={styles.listMainContainer}>
        <View style={styles.listIconContainer}>
          <TouchableOpacity>
            <Icon name="bookmark" size={20} style={{opacity: 0.2}} />
          </TouchableOpacity>
        </View>
        <View style={{flex: 0.9}}>
          <TouchableOpacity
            onPress={() =>
              this.props.navigation.navigate({
                routeName: 'Song',
                params: {songText: text, songTitle: title},
              })
            }>
            <Text style={styles.listText}>{newTitle}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  };

render() функция 

  render() {
    return (
      <View style={{flex: 1}}>
        <FlatList
          data={Songs}
          renderItem={({item}) => this.renderItem(item.title, item.text)}
          keyExtractor={(item, index) => item.number}
        />
      </View>
    );
  }

Предварительное исполнение очень плохое. Дело не в том, как быстро загружается список. Когда я нажимаю элемент, между нажатием и действием <TouchableOpacity> возникает серьезное отставание.

Я пытался использовать другой подход, например, я хотел отобразить список, используя map() function 

     renderList = () => {
       return (
        Songs.map(item => {
          if (item.title.length > 38) {
            item.title = item.title.substr(0, 38) + '...';
          }
          return (
            <View key={item.number} style={{ display: 'flex', flexDirection: 'row' }}>
              <View style={{ flex: 0.1, marginTop: 8, justifyContent: 'center', alignItems: 'center' }}>
                <TouchableOpacity>
                  <Icon name="bookmark" size={20} />
                </TouchableOpacity>
              </View>
              <View style={{ flex: 0.9 }}>
                <TouchableOpacity>
                  <Text style={{ fontSize: 18, marginTop: 8 }}>{item.title}</Text>
                </TouchableOpacity>
              </View>
            </View>
          )
        })
    )
  };

Прошло отставание до выполнения, но загрузка списка (на эмуляторе) заняла несколько секунд

Есть подсказки?

1 Ответ

0 голосов
/ 08 января 2020

Когда у вас есть огромный объем данных, всегда рекомендуется использовать просмотрщик, потому что он преодолевает большинство ограничений FlatList, VirtualizedList и ListView.

Перейдите по ссылке реагировать-нативный -recyclerview для документации.

...