Я не могу понять, почему стиль не применяется к внутреннему виду {props.children} в следующем коде. Он не выдает никаких ошибок, а только отображает {props.children} как простой текст.
import React from 'react';
import { View } from 'react-native';
const Card = (props) => {
return (
<View style = {styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderWidth: 8,
borderRadius: 2,
borderColor: 'black',
borderBottomWidth: 0,
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 60
}
};
export default Card;
рендеринг {props.children} здесь:
import React from 'react';
import { Text } from 'react-native';
import Card from './Card';
const AlbumDetail = (props) => (
<Card>
<Text>{props.album.title}</Text>
</Card>
);
export default AlbumDetail;
Решенная проблема: возникла ошибка с metro Bundler, о которой я не знал, из-за которой мой проект не обновлялся. Моя проблема была решена перезапуском сборщика метро.





Вы просто передаете свои вложенные компоненты в AlbumDetail, но не применяете какой-либо стиль к text внутри вашего Card-компонента. Вы должны установить их так:
import React from 'react';
import { Text } from 'react-native';
import Card from './Card';
const AlbumDetail = (props) => (
<Card>
<Text styles = {props.album.title}></Text>
</Card>
);
export default AlbumDetail;
@ Ответ Мурмельтье содержит крошечную ошибку.
Текстовый компонент имеет название свойства «стиль», а не «стили».
<Text style = {props.album.title}></Text>
Я думал, что схожу с ума. Я очень рад, что нашел твой ответ. Крошечная опечатка действительно может вас испортить.
Вы не применяете стили к его дочерним элементам. Просто самому родителю. Вы должны предоставить стили для элемента Text, если хотите, чтобы дочерние элементы (в данном случае Text) имели эти стили.