渲染功能错误

Question

我收到一个错误“渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null。” 我想这与 My TimelineCard 中的类型有关。我认为类型未设置或可能未设置，但我无法弄清楚确切的位置。 在 ios 上我没有遇到同样的错误，仅在 android 上。我正在附加我的 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

建议很明确：

或者，不渲染，返回 null。

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

您可能缺少 1 个案例 => 在 return null 之前添加一个 console.log 以检查它是什么。