javascript - react-native 调用自定义视图
问题描述
我有一个自定义header
视图,我在课堂上调用了它,但由于某种原因它没有显示。
export default class App extends Component<Props> {
customHeader(){
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
}
render() {
return (
<View style={styles.container}>
//Calling my custom header
{this.customHeader()}
</View>
);
}
}
我觉得我的代码是正确的,但标题没有显示。知道为什么吗?
解决方案
你的customHeader
函数必须返回一些东西。现在它只是运行 jsx 并且什么都不返回。像这样修复它,例如:
customHeader(){
return (
<View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
<TouchableOpacity>
<Text>Header</Text>
</TouchableOpacity>
</View>
)
}