渲染函数出错

Question

我收到一个错误 "Nothing was returned from render.This usually means a return statement is missing.Or, to render nothing, return null." 我想这与我的 TimelineCard.I 中的类型有关，认为类型未设置或可能，但我无法弄清楚确切位置。在 ios 我没有犯同样的错误，只有在 android.I 我附加了我的 Render 函数。

我的时间线卡片：

renderInfoBar(width, item) {
        let dotSize = 6;

    if (Platform.OS === "ios") {
        return (
            <View style={{width: width - 80, flexDirection: 'row', backgroundColor: Colors.white}}>
                <View style={{flex: 1, flexDirection: 'row',  alignItems: 'center', justifyContent: 'flex-start'}}>
                    <Text style={{marginRight: 0, marginLeft: 10, fontSize: 12, fontWeight: 'bold', color: Colors.darkText}}>{numeral(item.likes).format('0,0')} likes</Text>
                    <View style={{width: dotSize, height: dotSize, backgroundColor: Colors.darkText, borderRadius: 25, marginLeft: 10, marginRight: 10}}></View>
                    <Text style={{fontSize: 12, fontWeight: 'bold', color: Colors.darkText}}>{numeral(item.shares.length).format('0,0')} shares</Text>
                </View>
                <View style={{flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end', marginTop: 0}}>
                    <Text style={{fontSize: 12, fontWeight: 'bold', color: Colors.darkText}}>{numeral(item.views).format('0,0')}</Text>
                    <Image source={require("../assets/images/views-icon.png")} style={{marginRight: 10, marginLeft: 5}}/>
                </View>
            </View>                                                         
        );  
    }
    else {
        return (
            <View style={{width: width - 80, height: 30, flexDirection: 'row', backgroundColor: Colors.white}}>
                <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', marginTop: 2}}>
                    <Text style={{marginRight: 0, marginLeft: 10, fontSize: 12, fontWeight: 'bold', color: Colors.darkText}}>{numeral(item.likes).format('0,0')} likes</Text>
                    <Entypo name="dot-single" style={{marginTop: -7}} size={32} color={Colors.darkText} />                          
                    <Text style={{fontSize: 12, fontWeight: 'bold', color: Colors.darkText}}>{numeral(item.shares.length).format('0,0')} shares</Text>
                </View>
                <View style={{flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end', marginTop: 0, marginBottom: 7}}>
                    <Text style={{fontSize: 12, fontWeight: 'bold', color: Colors.darkText}}>{numeral(item.views).format('0,0')}</Text>
                    <Image source={require("../assets/images/views-icon.png")} style={{marginRight: 10, marginLeft: 5}}/>
                </View>
            </View>                                                         
        );  
    }
}

render() {

let {width, height} = Dimensions.get('window');

let containerStyle = {flex: 1, marginLeft: 10, marginBottom: 20};

if (this.state.rowData.type === PERMISSION_REQUEST) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PERMISSION_GRANTED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PERMISSION_DECLINED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PERMISSION_CANCELED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_VIEWED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_LIKED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_UNLIKED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_SHARED) {
    return (
        <View style={containerStyle}>
            {this.renderNotificationWithFullPhoto(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_COMMENTED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )   
}
else if (this.state.rowData.type === PHOTO_TAGGED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_NOTED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_CREATED) {
    return (
        <View style={containerStyle}>
            {this.renderNotificationWithFullPhoto(this.state.rowData)}
        </View>
    )                                 
}
else if (this.state.rowData.type === PHOTO_SCREENSHOT_CAPTURE) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}
else if (this.state.rowData.type === PHOTO_UNSHARED) {
    return (
        <View style={containerStyle}>
            {this.renderNotification(this.state.rowData)}
        </View>
    )           
}

}

Answer 1

建议明确：

Or, to render nothing, return null.

您需要添加最后一个 else（不是 else if）和 return null;

您可能遗漏了 1 个案例 => 让我们在 return null 之前添加一个 console.log 来检查它是什么。

渲染函数出错

Error on Render function

android

render

reactjs

react-native

react-proptypes