React Native - コンポーネントがビューを受け入れて表示するようにします。

Question

React Nativeの非常に新しいです。

私のプロジェクトでは、次のような要件があります。

私はComponentというBaseComponentという名前のビューをプロップとして受け取り、それをレンダリングメソッドでタッチ可能なハイライト内に表示します。

CustomComponentで私はこのBaseComponentを使用しています。ビューを小道具として渡します。これは、getView()という関数から渡されているViewが返されます。しかし、それは私に空白の画面を表示しています。

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

へ：

お返事お願いします。ありがとう:)