React Native: после сопоставления изображений измените стиль в зависимости от результатов запроса Firebase.

Question

У меня небольшая проблема с обновлением источника изображения (который был динамически создан на карте) после выполнения другого запроса Firebase для сравнения статусов пользователей друг с другом.

import React from 'react';
import { ActivityIndicator, Dimensions, Image, Button, StyleSheet, Text, TouchableOpacity, ScrollView, View } from 'react-native';
import IconTabs from './IconTabs.js';
import firebase from 'firebase';

export default class Forest extends React.Component {
static navigationOptions = {
    header: <IconTabs />,
}

constructor() {
    super();
    this.state = {
        users: [],
        showLoading: true,
    };
    this.onPress = this.onPress.bind(this);
}

componentDidMount() {
    let whichGender = null;
    if (global_user_gender === 'male') {
        whichGender = 'female';
    } else if (global_user_gender === 'female') {
        whichGender = 'male';
    } else {
        console.warn("Error! This user has no gender somehow!");
    }
    let arrayOfPromises = new Promise((resolve, reject) => {
        firebase.database().ref()
        .child('users').orderByChild('gender').equalTo(whichGender).on('value', data => {
            resolve(Object.values(data.val()))
            this.setState({showLoading: false});
            this.setState({users: Object.values(data.val())});
            this.state.users.map(user => {
                // console.log("user id: ", user.id);
                firebase.database().ref(`/bonds/${global_user_id}_${user.id}`)
                .on('value', data => {
                    if(data.exists()) {
                        // this.state.users.setState({bondStatus: data.val().bond})
                        console.log(`${user.id} like or match found. Are they matched?`, data.val().bond);
                    }
                })
            });
        })
    })
}

onPress(data) {
    global.others_data = data;
    this.props.navigation.navigate('OthersScreen');
}

render() {
    return (
        <ScrollView>
        {
            this.state.showLoading &&
            <View>
                <Image style={styles.bird} source={require('../assets/colibri-logo.png')} />
                <Text style={styles.loadtext}>Loading</Text>
                <ActivityIndicator size="large" />
            </View>
        }
        <View style={styles.container}>
        {
            this.state.users.map(user => {
                return (
                    <View key={user.id} keyProp={user.id} ref={user.id}>
                        <TouchableOpacity onPress={() => this.onPress(user)}>
                            <Image
                                source={{uri:`data:image/gif;base64,${user.pic}`}}
                                style={styles.circleimage}
                            />
                        </TouchableOpacity>
                        <Text>{user.bio}</Text>
                    </View>
                )
            })
        }
            </View>
        </ScrollView>
    )
}

}

let deviceWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
container: {
    flex: 1,
    width: deviceWidth,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    flexWrap: 'wrap',
    alignSelf: 'center',
},
text: {
    textAlign: 'center',
    fontSize: 30,
    marginTop: 20,
    marginBottom: 10,
},
text2: {
    textAlign: 'center',
    fontSize: 20,
    fontStyle: 'italic',
    marginLeft: 20,
    marginRight: 20,
    height: 100,
},
loadtext: {
    alignSelf: 'center',
    marginBottom: 10,
},
button: {
    width: deviceWidth - 40,
    paddingTop: 10,
    marginBottom: 20,
    alignSelf: 'center',
},
circleimage: {
    height: 150,
    width: 150,
    borderRadius: 125,
    alignSelf: 'center',
    marginTop: 10,
    marginBottom: 20,
},
circleimagered: {
    height: 200,
    width: 200,
    backgroundColor: 'red',
    borderRadius: 125,
    alignSelf: 'center',
    marginTop: 10,
    marginBottom: 20,
},
bird: {
    width: 200,
    height: 200,
    marginTop: 20,
    marginBottom: 50,
    alignSelf: 'center',
},
});

console.log("${user.id} like or match found. Are they matched?", data.val().bond);возвращает это:

EXbmej7RpVY0VvKvVgHSEfJV6Zm2 лайк или совпадение найдено.Они совпадают?true Goo6wObYoHZmUBsgoFs8nLoCMMs1 лайк или совпадение найдено.Они совпадают?true MMo7kRByoYM7lowyTTNf1XJkmka2 лайк или совпадение найдено.Они совпадают?false

Что я хочу сделать этим трем пользователям, так это нарисовать цветной круг вокруг их значка, но все, что я пробовал, до сих пор не удавалось.Я нашел что-то вроде того, что я хочу, но когда я проверял это, оно также не работало: https://codepen.io/PiotrBerebecki/pen/PGaxdx

Не могли бы вы помочь мне сделать так, чтобы значки моего пользователя выглядели на этой картинке?

Answer 1

В конце концов я заставил его работать, расширив запрос запросом внутри него.Как ни странно, отображение обычно требует возврата, но в этом случае это не ...?Как бы то ни было, работает так, как я хочу сейчас:

componentDidMount() {
    let whichGender = null;
    if (global_user_gender === "male") {
        whichGender = "female";
    } else if (global_user_gender === "female") {
        whichGender = "male";
    } else {
        console.warn("Error! This user has no gender somehow!");
    }
    firebase.database().ref()
    .child("users").orderByChild("gender").equalTo(whichGender)
    .on("value", data => {
        let updatedUsers = [];
        Object.values(data.val()).map(user => {
            firebase.database().ref(`/bonds/${global_user_id}_${user.id}`)
            .on("value", bond => {
                if (bond.exists()) {
                    if(bond.val().bond) {
                        user.borderColor = 'red';
                    } else {
                        user.borderColor = 'green';
                    }
                    user.borderWidth = 7;
                    updatedUsers.push({
                        age: user.age,
                        bio: user.bio,
                        borderColor: user.borderColor,
                        borderWidth: user.borderWidth,
                        firstName: user.firstName,
                        gender: user.gender,
                        id: user.id,
                        lastName: user.lastName,
                        pic: user.pic
                    })
                    this.setState({ users: updatedUsers });
                } else {
                    firebase.database().ref(`/bonds/${user.id}_${global_user_id}`)
                    .on("value", bond2 => {
                        if (bond2.exists()) {
                            if(bond2.val().bond) {
                                user.borderColor = 'red';
                            } else {
                                user.borderColor = 'blue';
                            }
                            user.borderWidth = 7;
                            updatedUsers.push({
                                age: user.age,
                                bio: user.bio,
                                borderColor: user.borderColor,
                                borderWidth: user.borderWidth,
                                firstName: user.firstName,
                                gender: user.gender,
                                id: user.id,
                                lastName: user.lastName,
                                pic: user.pic
                            })
                            this.setState({ users: updatedUsers });
                        } else {
                            user.borderColor = 'white';
                            user.borderWidth = 0;
                            updatedUsers.push({
                                age: user.age,
                                bio: user.bio,
                                borderColor: user.borderColor,
                                borderWidth: user.borderWidth,
                                firstName: user.firstName,
                                gender: user.gender,
                                id: user.id,
                                lastName: user.lastName,
                                pic: user.pic
                            })
                            this.setState({ users: updatedUsers });
                        }
                    })
                }
            })
            this.setState({ showLoading: false });
        })
    })
}

Рабочий пример