Изображение не отображается в Flatlist, но появляется при открытии модального окна - PullRequest
Новая
       34

Изображение не отображается в Flatlist, но появляется при открытии модального окна

0 голосов
/ 05 июня 2018

Я пытаюсь сделать кучу картинок в плоском списке.В настоящее время изображения НЕ отображаются при визуализации страницы.Однако, когда я нажимаю на экран, где должна быть картинка, он корректно открывает модал, который позволяет мне просматривать картинку.Почему картинка НЕ ​​появляется в плоском списке, а в модальном?

Во-первых, я получаю нужные мне данные из бэкэнда 

componentWillMount() {
    apiService.getAlarmList().then((res) => {
        console.log('NotificationHistory:componentWillMount:getAlarmList:res:', res);
        for (let i = 0; i < res.length; i++) {
            const thisHistory = res[i];
            thisHistory.image = null;
            thisHistory.idx = i;
            this.getItemImage(thisHistory.path, thisHistory.idx);
        }
        this.setState({ cameraHistory: res });
    });
}

this.state.cameraHistory теперь имеет массивсо всеми необходимыми данными. 

renderCameraHistory() {
    return (<FlatList
        data={this.state.cameraHistory}
        renderItem={({ item, index }) => {                        
            // console.log('NotificationHistory:renderCameraHistory:item:', item, index);
            // console.log('this is rendering the flat list', item.image);
            if (item.image !== null) {
                return (
                    this.renderSingleHistory(item, index)
                );
            }
        }}
        //Because we're using the indexes(which are ints) we need to convert them to strings first
        keyExtractor={(item, index) => index.toString()}
        // keyExtractor={(item) => item.path}
        //this needs unique keys, however the current array has multiple copies of the same item
        //item.key is supposed to work, but still 
        //extraData={this.state.toggleRefresh}
    />);
}

содержит компонент плоского списка.

Каждое изображение затем визуализируется с помощью функции ниже.При нажатии на изображение открывается модальное окно, и появляется увеличенная версия изображения, а также кнопка для закрытия модального окна и возврата к списку изображений. 

renderSingleHistory(item) {
    const dateNTime = item['date-time'];
    const dateArr = dateNTime.split(' ');
    const dateOnly = dateArr[0];
    const timeOnly = dateArr[1];
    const logoPic = Config.images.homeIcon;
    const picForFlatList = item.image;

    return ( 
    <View style={styles.cardView}>
        <View style={styles.pictureView}>
            <TouchableOpacity
                onPress={() => {
                    this.getBigPicture(item);
                }}
            >
                <View
                    style={{
                        width: 100,
                        height: 100,
                    }}
                >
                    <Image
                        source={{ uri: picForFlatList }}
                        style={{
                            resizeMode: 'contain'
                        }}
                    />
                </View>
            </TouchableOpacity>
        </View>
        <View style={styles.textView}>
            <View style={styles.topTextView}>
                <Text>{item.serial}</Text>
            </View>
            <View style={styles.bottomTextView}>
                <View style={styles.bottomLeftTextView}>
                    <Text>{dateOnly}</Text>
                </View>
                <View style={styles.bottomRightTextView}>
                    <Text>{timeOnly}</Text>
                </View>
            </View>
        </View>

    </View>
    );
}

Дополнительные примечания: еслиЯ использую статическое изображение в качестве источника, отображается плоский список статического изображения, ОДНАКО, когда я нажимаю на изображение, изображение, которое находится внутри массива, загружается в модальный режим (изображение, которое я хочу загрузить в плоский список),

1 Ответ

0 голосов
/ 06 июня 2018

Решением было использование ListEmptyComponent внутри FlatList.Из-за того, что состояние не обновляется мгновенно, когда вызывается метод renderItem, исходный объект НЕ содержит item.image (выполняется 2 вызова сзади, поэтому это занимает некоторое время).Следовательно, ListEmptyComponent действует как заполнитель до тех пор, пока состояние не будет полностью обновлено и позволяет что-то отображать вместо того, чтобы пытаться отобразить ноль.

Мне удалось узнать это с помощью этой записи

...