React Native 组件异常 <文本字符串必须在文本组件中呈现>

Question

我正在尝试使用 expo 构建一个 react native 应用程序，首先我尝试使用我的 chrome web 浏览器构建这个应用程序，之后我尝试使用我的 android 设备测试应用程序并且我'我得到一个异常 - “Text strings must be rendered within a <Text> component” HomeScreen.js 文件。我不知道为什么会这样。我的代码如下，

/*This is an Example of Grid View in React Native*/
// import * as React from "react";
import React from 'react';
import { Image, FlatList, StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
import { COLORS } from '../../asserts/Colors/Colors';
import { CATEGORIES } from '../../asserts/mocks/itemListData';
import CategoryGridTitle from '../components/HomeGridTile';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/HeaderButton';
import HomeScreenButton from '../components/HomeScreenButton';

//import all the components we will need

const renderTopBarItems = (topBarItems) => {
  return (
    <TouchableOpacity
      style={styles.topBar}>
      <Text style={styles.textStyle}> {topBarItems.item.category} </Text>
    </TouchableOpacity>
  )
}

const HomeScreen = props => {

  const renderGridItem = (itemData) => {
    return <CategoryGridTitle
      title={itemData.item.title}
      image={itemData.item.image}
      onSelect={() => {
        props.navigation.navigate({
          routeName: 'PaymentHandlerScreen',
          params: {
            categoryId: itemData.item.id
          }
        });
      }} />;
  }

  // const [images, setImages] = React.useState(picsumImages);
  return (
    <View style={styles.mainBody}>
      <View style={styles.searchContainer}>
        <TextInput
          placeholder='Search'
          style={styles.formField}
          placeholderTextColor={'#888888'}
        />
        <TouchableOpacity onPress={() => props.navigation.navigate('BarCodeScannerScreen')}
          style={styles.saveFormField}>
          <Image
            source={require('../../../images/barcode.png')}
            style={{
              width: '100%',
              height: '30%',
              resizeMode: 'contain',
              alignContent: 'center',
            }}
          /> </TouchableOpacity>
      </View>
      <View style={styles.tabBar}>
        <FlatList
          horizontal
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          keyExtractor={(item, index) => item.id}
          data={CATEGORIES}
          renderItem={renderTopBarItems} />
      </View>
      <FlatList
        keyExtractor={(item, index) => item.id}
        data={CATEGORIES}
        renderItem={renderGridItem}
        numColumns={3} />

      <HomeScreenButton style={styles.buttonView} />
    </View>
  );
};

HomeScreen.navigationOptions = navigationData => {
  return {
    headerTitle: 'Tickets',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='profile'
          iconName='ios-star'
          onPress={() => {
            console.log('profile clicked');
          }} />

        <Item
          title='more'
          iconName='md-more'
          onPress={() => {
            console.log('more clicked');
          }} />

      </HeaderButtons>
    )
  };
};

export default HomeScreen;

const styles = StyleSheet.create({
  mainBody: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: COLORS.background,
    paddingTop: '3%',
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
  },
  tabBar: {
    paddingBottom: '3%',
  },
  topBar: {
    width: 150,
    borderWidth: 1,
    borderRadius: 20,
    borderColor: COLORS.primary_blue,
    padding: '5%',
    marginLeft: '5%',
  },
  textStyle: {
    color: COLORS.primary_blue,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 14,
  },
  formField: {
    flex: 4,
    borderWidth: 1,
    padding: '4%',
    marginLeft: '2%',
    borderRadius: 10,
    borderColor: COLORS.gray,
    backgroundColor: COLORS.gray,
    fontSize: 15,
    height: '35%',
  },
  saveFormField: {
    flex: 0.5,
    justifyContent: 'space-between',
    alignItems: 'center',
    margin: 10,
  },
  buttonView: {
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
});

谢谢。

Answer 1

我遇到过几次这个错误。 RN 不喜欢标签中的多余空格。尝试删除{topBarItems.item.category}前后的空格

<Text style={styles.textStyle}>{topBarItems.item.category}</Text>