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

Question

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

问题

如果删除 <View>，错误就会消失标签和 AlbumList index.js 文件中的组件(意味着仅显示一个组件)。我浏览过像 this 这样的线程，但我仍然无法确定我如何使用<View>标签错误。

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

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

让我知道它是否有效