文本字符串必须在React Native

Question

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

问题

如果我删除index.js文件中的<View>标记和AlbumList组件，则错误消失（这意味着仅显示一个组件）。我浏览了类似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本机组件时，尝试将每个元素放在新行中，这样您就不必担心空格

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>