在本地

Question

我只是尝试使用react-native来构建一个移动应用程序，而且我对新的反应和反应都很新。所以我无法弄清楚我遇到的这个错误：

这是我为了造型目的而构建的Card.js：

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

const Card = (props) => {   return (
    <View style={styles.containerStyle}>
      {props.childern}
    </View>   ); };

const styles = {   containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10

  } };

export default Card;

然后我将Card组件添加到我的AlbumDetail.js中以进行样式化。

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


// Constant if class and function ins not used
const AlbumDetail = (props) => {
      return (
        <View>
          <Text>{props.albumList.title}</Text>
        </View>
      );
};
// export
export default AlbumDetail;

现在的问题是：

如果我添加

<Card></Cade>

它只显示没有数据的样式是可见的

如果我保留

<View></View>

它会显示没有样式的所有数据。

Problem Screenshot

Answer 1

我可以在您的代码中看到拼写错误，请检查卡片组件{props.children}而不是{props.childern}