React Native同一组件部分场景正常，部分场景报文本渲染错误

在React Native开发中遇到一个问题：逻辑类似的组件，在某些场景下能正常运行，但在另一些场景里会抛出Text strings must be rendered within a <Text> component错误。

可正常运行的代码示例 #

StoreScreen页面代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView, Image } from 'react-native';
import StoreItem from '../../components/StoreItem';

export default function StoreScreen({navigation}) {
    return (
        <ScrollView style={styles.container}>
                    <ScrollView horizontal={true} showsVerticalScrollIndicator={false}>
                        <StoreItem imageUri={require('../../../assets/favicon.png')} name="Salad" price="50"/>
                        <StoreItem imageUri={require('../../../assets/favicon.png')} name="Salad" price="50"/>
                    </ScrollView>
        </ScrollView>
    );
}

StoreItem组件代码 #

import React, { Component } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView, Image } from 'react-native';

class StoreItem extends Component {
    render() {
        return (
            <View style={{ height: 120, with: 20, marginLeft: 20, borderColor: '#EFEFEF', borderWidth: 1, padding: 8, borderRadius: 10, backgroundColor: '#F5F5F5'}}>
                <View style={{flex: 2}}>
                    {
                        this.props.isLocked ? 
                        <Image
                            style={{flex:1, width:null, height:null, resizeMode: 'cover'}}
                            source={{
                            uri: 'https://cdn-icons-png.flaticon.com/512/641/641693.png',
                         }}
                        />
                       :  <Image
                            style={{flex:1, width:null, height:null, resizeMode: 'cover'}}
                            source={this.props.imageUri}
                          /> 
                    }
                    
                </View>
                <View style={{flex: 1, padding: 10}}>
                    <Text>{this.props.name}</Text>
                    {
                        this.props.isLocked ? 
                        <Text>{this.props.price}</Text> : null
                    }
                </View>
            </View>
        );
    }
}

export default StoreItem;

报错的代码示例 #

SetgoalScreen页面代码 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import AvailableGoalCard from '../components/AvailableGoalCard';

export default function SetgoalScreen() {
return (
        <AvailableGoalCard name="title"/>
        <Button title="Set a goal now!" />
    </View>
);
}

AvailableGoalCard组件代码 #

import React, {Component} from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { TextInput } from 'react-native';
import IonIcons from 'react-native-vector-icons/Ionicons';

class AvailableGoalCard extends Component {
    render() {
        return (
<View>
   <View>
   <Text>{this.props.name}</Text>
   <IonIcons name = "arrow-forward-outline" />;
   </View>
</View>
);
    }
}

const styles = StyleSheet.create({
});

export default AvailableGoalCard;

问题原因及解决方法 #

报错的核心原因是AvailableGoalCard组件中<IonIcons>标签后多了一个分号。这个分号会被React解析为独立的文本节点，而React Native要求所有文本内容必须包裹在<Text>组件内部，因此触发了Text strings must be rendered within a <Text> component错误。

只需移除<IonIcons>标签后的分号即可解决问题，修改后的AvailableGoalCard组件代码如下：

import React, {Component} from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { TextInput } from 'react-native';
import IonIcons from 'react-native-vector-icons/Ionicons';

class AvailableGoalCard extends Component {
    render() {
        return (
<View>
   <View>
   <Text>{this.props.name}</Text>
   <IonIcons name = "arrow-forward-outline" />
   </View>
</View>
);
    }
}

const styles = StyleSheet.create({
});

export default AvailableGoalCard;

内容的提问来源于stack exchange，提问作者helhel