React Native 中的文本字符串必须在 <Text> 组件中渲染

Question

我正在使用react-native-cli版本2.0.1和react-native版本0.57.8。我正在学习 React Native，并且在尝试在主组件中渲染两个不同的子组件（Header和）时遇到了问题。AlbumListApp

问题

如果我删除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 文件无关，但仍然共享代码。

header.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>
    );

让我知道它是否有效