React Native - 使组件接受视图作为prop并显示它

Question

我对React Native非常感兴趣。

在我的项目中，我的要求看起来像这样。

我有一个名为Component的{​​{1}}接受视图作为道具，并在其渲染方法中将其显示在可触摸的高光内。

我在BaseComponent中使用此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>
    );
  }
}

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

在我的模拟器中显示的代码如下：

我希望我的回答可以帮助你......谢谢：）