reactjs - 修复错误：不变违规：必须在组件内呈现文本字符串 - React Native

Question

我一直跑到

错误：不变违规：必须在组件内呈现文本字符串。

我查看了其他解决方案，但不知道如何解决它。我已尝试按照建议删除文本组件中的空格，但不知道下一步该做什么。

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ImageBackground,
} from 'react-native';

const profileImage = require('./images/user-profile.jpg');
const friendsIcon = require('./images/profile.png');
const favIcon = require('./images/plain-heart.png');
const msgIcon = require('./images/chat.png');

class MainApp extends Component {
    state = {
        name: 'Crysfel',
        lastName: 'Villa Roman',
        occupation: 'Software Engineer',
        friends: '1,200',
        favorites: '2,491',
        comments: '4,832',
    };

    renderStat(options) {
      return (
        <View style={styles.stat}> 
          <Image
            source={options.icon} 
            style={[styles.icon, options.selected ? 
            styles.selected : null]} 
          /> 
          <Text style={styles.counter}>{options.value}</Text> 
        </View>
      );
    }


    render() {
      const {
          name,
          lastName,
          occupation,
          friends,
          favorites,
          comments,
      } = this.state;

      return (
        <ImageBackground source={profileImage} style={styles.container}> 
          <View style={styles.info}> 
            <View style={styles.personal}> 
              <Text style={styles.name}>{name} 
              {lastName} 
              </Text> 
              <Text style={styles.occupation}> 
                {occupation.toUpperCase()} 
              </Text> 
            </View> 
            <View style={styles.stats}> 
              {this.renderStat(
              {icon: friendsIcon,value: friends, selected: true })} 
              {this.renderStat({ icon: favIcon,value: favorites })} 
              {this.renderStat({ icon: msgIcon,value: comments })} 
            </View> 
          </View> 
        </ImageBackground>
      );
    }
}


export default MainApp;


const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: null,
        width: null,
    },
    info: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0,0,0,0.5)',
        top: null,
    },
    info: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0,0,0,0.5)',
        top: null,
    },
    personal: {
        padding: 30,
    },
    name: {
        color: '#fff',
        fontFamily: 'Helvetica',
        fontSize: 30,
        fontWeight: 'bold',
    },
    occupation: {
        color: '#d6ec1b',
        marginTop: 5,
    },
    selected: {
        tintColor: '#d6ec1b',
    },
    icon: {
        tintColor: '#504f9f',
        height: 30,
        width: 30,
    },
    counter: {
        color: '#fff',
        fontSize: 15,
        marginTop: 5,
    },
    stats: {
        flexDirection: 'row',
    },
    stat: {
        alignItems: 'center',
        backgroundColor: '#7675b7',
        borderColor: '#6e6db1',
        borderLeftWidth: 1,
        flex: 1,
        padding: 10,
    }
});

标签： reactjsreact-native