React Native - 使組件接受視圖作爲道具並顯示它

Question

我對React Native非常陌生。

在我的項目中，我有一個看起來像這樣的要求。

我有一個名爲BaseComponent的Component，它接受一個視圖作爲道具並在其渲染方法中將其顯示在可觸摸的高亮區中。

我使用此BaseComponent在我的CustomComponent通過傳遞一個視圖作爲道具。這個正在傳遞的View是從名爲getView()的函數返回的。但它顯示出一個空白的屏幕。

// BaseComponent.js 

import React, { Component } from 'react' 
import { 
    View, 
    TouchableHighlight 
} from 'react-native' 

export default class BaseComponent extends Component { 

    render() { 
    return(
     <TouchableHighlight onPress= { this.onPress.bind(this) } > 

      <View> 
      { 
       this.props.contentView 
      } 
      </View> 

     </TouchableHighlight> 
    ); 
    } 
} 

-

// CustomComponent.js 

import React, { Component } from 'react' 
import { Text } from 'react-native' 
import BaseComponent from './BaseComponent' 

export default class CustomComponent extends Component { 

    getView() { 
    return(
     <Text> Hello { this.props.name }! </Text> 
    ) 
    } 

    render() { 
    <BaseComponent contentView={ this.getView.bind(this) }> 
    } 
} 

Answer 1

我只是編輯代碼，如：

// BaseComponent.js 

import React, { Component } from 'react'; 
import { View, TouchableHighlight, Text } from 'react-native'; 

export default class BaseComponent extends Component { 
    render() { 
    return (
     <TouchableHighlight onPress={null}> 

     <View> 
      <Text> hello </Text> 
     </View> 

     </TouchableHighlight> 
    ); 
    } 
} 

而且......

// CustomComponent.js 

import React, { Component } from 'react'; 
import { Text, View } from 'react-native'; 
import BaseComponent from './BaseComponent'; 

export default class routerFlax extends Component { 
    getView() { 
    return <Text> Hello {this.props.name}! </Text>; 
    } 

    render() { 
    return <BaseComponent contentView={this.getView.bind(this)} />; 
    } 
} 

我在模擬器

代碼顯示，如：

問題是你傳遞道具null並且你不返回組件渲染。所以結果是空白的。

編輯＃1

基於你對你的問題的評論，我想你只需要改變：

<BaseComponent contentView={this.getView.bind(this)} />; 

要

<BaseComponent contentView={this.getView()} />; 

我在模擬器

代碼顯示，如：

我希望我的答案能幫助你..謝謝:)