文本字符串必須在<text> React Native 中的組件問題</text>

Question

我正在使用 react-native-cli 版本2.0.1和 react-native 版本0.57.8 。 我正在學習 React native，並且在嘗試在主App組件中呈現兩個不同的子組件（ Header和AlbumList ）時遇到了問題。

問題

如果我刪除 index.js 文件中的<View>標簽和AlbumList組件（意味着只顯示一個組件），錯誤就會消失。 我已經查看過這樣的線程，但仍然無法確定我是如何錯誤地使用<View>標記的。

索引.js

import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';

//>Create a component
const App = () => (
<View> <Header headerName={'Albums'} /> 
<AlbumList />
</View>

);


//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);

專輯列表.js

import React from 'react';
import { View, Text } from 'react-native';

const AlbumList = () => {
return (
  <View><Text> Album List </Text></View>
);
};

export default AlbumList;

我認為問題與 Header.js 文件無關，但仍然共享代碼。

標題.js

import React from 'react';
import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements

// Make a component
const Header = (props) => {

  const { textStyle, viewStyle } = styles;

  return (
    <View style = {viewStyle}>
      <Text style = {textStyle}> {props.headerName}</Text>
    </View>
  );
};

const styles = {
  viewStyle: {
      backgroundColor: '#F8F8F8',
      alignItems: 'center',
      justifyContent: 'center',
      height: 60
  },

  textStyle: {
    fontSize: 20
  }
};

export default Header;

感謝幫助。 提前致謝！

Answer 1

在您的 index.js 文件中，將 App 函數替換為以下內容，

//Create a component
const App = () => (
  <View><Header headerName={'Albums'} /><AlbumList /></View>
);

這里的組件之間不應該有空格

在使用 React Native 組件時，嘗試將每個元素放在一個新行中，這樣你就不必擔心空格

const App = () => (
      <View>
        <Header headerName={'Albums'} />
        <AlbumList />
      </View>
    );

讓我知道它是否有效

Answer 2

就我而言，如圖所示，我有一個錯位的分號，這讓我非常頭疼

 <Screen>
        <RestaurantScreen />; //Make sure you have no misplaced semicolon like in my case here
      </Screen>