反應本地調用自定義視圖

Question

我有一個自定義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>
    );
  }
}

我覺得我的代碼是正確的，但是標題沒有顯示。 知道為什么嗎？

Answer 1

您的customHeader函數必須返回某些內容。 現在，它只運行jsx，什么也不返回。 像這樣修復它：

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