Question

我收到错误“没有从render返回任何内容。这通常意味着缺少return语句。或者，什么都不渲染，返回null。” 我猜它与My TimelineCard中的类型有关。我认为类型没有设置或者可能，但我无法弄清楚到底在哪里。在ios上我没有得到同样的错误，只在android上。我正在附加我的渲染功能。

我的时间线卡：

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。

您需要使用else

添加最后else if（不是return null;）

您可能遗漏了1个案例=＆gt;在console.log之前添加return null来检查它是什么。

渲染功能出错

1 个答案: