反应本地调用自定义视图

Question

I have a custom header view and I have call this inside my class but for some reason it is not showing.

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

I feel like my code is correct but the header is not showing. Any idea why?

Answer 1

Your customHeader function must return something. Right now it just runs jsx and returns nothing. Fix it like this for example:

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