javascript - React-Native调用自定义 View

Question

我有一个自定义的 header View ，我在类中调用了它，但由于某种原因它没有显示。

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>
    );
  }
}

我觉得我的代码是正确的，但标题没有显示。知道为什么吗？

Answer 1

您的customHeader函数必须返回某些内容。现在它只运行 jsx 并且不返回任何内容。例如，像这样修复它:

customHeader(){
  return (
    <View style={{height:80, width:'100%', backgroundColor: 'blue'}}>
      <TouchableOpacity>
        <Text>Header</Text>
      </TouchableOpacity>
    </View>
  )
}