Question

我对原生的反应很新。我有一个用户配有我想在屏幕上显示的个人资料图片，当我打印到我的控制台snapshot.val().imageURL时，会显示正确的网址：

var profImage = 'https://www.placeholdit.com';
var user = authFB.currentUser;
 if (user) {
   database.ref('users').child(user.uid).once('value')
   .then((snapshot) => profImage = snapshot.val().imageURL)
   .catch(error => console.log(error))
   } else {
     console.log("No user")
 }

我将该网址分配给profImage并尝试将我的图片uri设置为该变量：

<Avatar
    large
    rounded
    source={{ uri: profImage }}
    onPress={() => alert(profImage)}
    activeOpacity={0.7}
    containerStyle={{ marginBottom: 12 }}
/>

但是，我的图片容器仍为空白。运行渲染功能时是否必须这样做，网元还没有被检索，因此组件显示是空白的？我是否使用this.setState更新组件？如果是这样，那么这样做的正确方法是什么？

以下是我的组件的相关部分：

class Profile extends React.Component {
    static navigationOptions = {
        title: "Profile",
        headerStyle: {
            backgroundColor: '#fff',
            borderBottomWidth: 0,
        },
        headerTitleStyle: {
            color: 'black'
        },
    }
    constructor() {
        super();
        this.state = {
            image: null,
            uploading: null,
        }
    }

    render() {

        const { navigate } = this.props.navigation;
        let { image } = this.state;

        var profImage = 'https://www.placeholdit.com';
        var user = authFB.currentUser;
        if (user) {
        database.ref('users').child(user.uid).once('value')
        .then((snapshot) => profImage = snapshot.val().imageURL)
        .catch(error => console.log(error))
        } else {
        console.log("No user")
        }

        return (
            <ScrollView>
                <View style={styles.profileTopContainer}>
                    <Avatar
                        large
                        rounded
                        source={{ uri: img }}
                        onPress={() => alert(profImage)}
                        activeOpacity={0.7}
                        containerStyle={{ marginBottom: 12 }}
                    />
                    <Text
                        style={styles.usernameText}
                    >
                        Jordan Lewallen
                    </Text>
                    <TouchableHighlight
                        onPress={this._pickImage}>
                        <Text
                            style={styles.userMinutes}
                        >
                            Choose a profile picture
                        </Text>
                    </TouchableHighlight>

                    {this._maybeRenderImage()}
                    {this._maybeRenderUploadingOverlay()}
                    {
                        (image)
                        ? <Image source={{ uri: image }} style={{ width: 250, height: 250 }} />
                        : null
                    }

                </View>
                }

Answer 1

请试试这个

 <Avatar
                    large
                    rounded
                    source={{ uri: img }}
                    onPress={() => alert(profImage)}
                    activeOpacity={0.7}
                    containerStyle={{ marginBottom: 12 }}
                />

替换为

 <Avatar
                    large
                    rounded
                    source={{ uri: profImage }}
                    onPress={() => alert(profImage)}
                    activeOpacity={0.7}
                    containerStyle={{ marginBottom: 12 }}
                />

Answer 2

这是因为您在render方法本身中调用了异步请求。当你的render方法执行你对imageUrl的请求时，这是一个异步调用，需要时间来解析和更新profImage变量的值。那时你的render方法就完成了它的执行并设置了占位符。如果您需要这样做，您应该将此profImage保持在组件状态。因此，一旦状态更新，将再次调用渲染方法并使用新图像更新UI。

试试这个！

class Profile extends React.Component {
static navigationOptions = {
    title: "Profile",
    headerStyle: {
        backgroundColor: '#fff',
        borderBottomWidth: 0,
    },
    headerTitleStyle: {
        color: 'black'
    },
}
constructor() {
    super();
    this.state = {
        image: null,
        uploading: null,
    }
}

componentWillRecieveProps(nextProps){
    var profImage = 'https://www.placeholdit.com';
    var user = authFB.currentUser;
    if (user) {
    database.ref('users').child(user.uid).once('value')
    .then((snapshot) => this.setState({ image: snapshot.val().imageURL }))
    .catch(error => console.log(error))
    } else {
      this.setState({ image: 'https://www.placeholdit.com' });
      console.log("No user")
    }
}

render() {

    const { navigate } = this.props.navigation;
    let { image } = this.state;

    return (
        <ScrollView>
            <View style={styles.profileTopContainer}>
                <Avatar
                    large
                    rounded
                    source={{ uri: image }}
                    onPress={() => alert(profImage)}
                    activeOpacity={0.7}
                    containerStyle={{ marginBottom: 12 }}
                />
                <Text
                    style={styles.usernameText}
                >
                    Jordan Lewallen
                </Text>
                <TouchableHighlight
                    onPress={this._pickImage}>
                    <Text
                        style={styles.userMinutes}
                    >
                        Choose a profile picture
                    </Text>
                </TouchableHighlight>

                {this._maybeRenderImage()}
                {this._maybeRenderUploadingOverlay()}
                {
                    (image)
                    ? <Image source={{ uri: image }} style={{ width: 250, height: 250 }} />
                    : null
                }

            </View>
            }

从数据库加载后图像没有显示？

2 个答案: