enter image description here
我试图将CardsSection
组件添加到Card
组件中,但是我不断收到有关文本违规的错误,但我什至没有在Tournament
,{{1 }}或Card
.js文件。我不明白为什么会收到此错误。有人可以告诉我该怎么做以及为什么吗?
Tournament.js
CardSection
CardSection.js
import React from "react";
import { View, Text, Image, ScrollView } from "react-native";
import { Card, Button, Spinner, CardSection } from "../common";
class Tournaments extends React.Component {
static navigationOptions = {
tabBarLabel: "Tournaments"
};
render() {
return (
<View style={styles.containerStyle}>
<Card>
<View style={styles.logoContainer}>
<Image
style={styles.logo}
source={require("../../Images/ShoeJackCityLogo.png")}
/>
</View>
<View style={styles.formContainer} />
</Card>
<ScrollView horizontal>
<Card>
<View style={{ flex: 1, flexDirection: "row" }}>
<CardSection>
<Image
style={styles.product}
source={require("../../Images/aj_4_toro.png")}
/>
</CardSection>
<CardSection>
<Image
style={styles.product}
source={require("../../Images/aj_4_toro.png")}
/>
</CardSection>
<CardSection>
<Image
style={styles.product}
source={require("../../Images/aj_4_toro.png")}
/>
</CardSection>
</View>
</Card>
</ScrollView>
</View>
);
}
}
const styles = {
containerStyle: {
flex: 1,
backgroundColor: "#F13C20",
paddingBottom: 20
},
logoContainer: {
alignItems: "center",
flexGrow: 1,
justifyContent: "flex-start",
paddingBottom: 15
},
logo: {
paddingTop: 15,
width: 50,
height: 50
},
product: {
width: 100,
height: 100,
paddingBottom: 15,
marginRight: 50
}
};
export default Tournaments;
Card.js
import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => (
<View style={styles.containerStyle}>
{props.children};
</View>
);
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: 'white',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
}
};
export { CardSection };
答案 0 :(得分:2)
您的孩子在CardSection组件之后紧接有一个分号。该分号被解释为文本,并且由于每个文本都必须在<Text>
组件内,因此会引发错误。
要解决此问题,只需更改
const CardSection = (props) => (
<View style={styles.containerStyle}>
{props.children};
</View>
);
到
const CardSection = (props) => (
<View style={styles.containerStyle}>
{props.children}
</View>
);
答案 1 :(得分:2)
尝试从父标记中删除所有空格(可能还有行尾)。
Facebook表示这不是错误,没有按预期工作(在相关的错误报告中),并且他们还没有对.56进行任何更改,但这不是它的实际工作方式,并且其工作方式与以前的版本显然不同。
此外,Expo那里的多余空格也没有问题。现在我不能告诉你你应该如何打算。