Question

如何渲染包含反应原生视图的函数？我得到的是一个空白的白色屏幕

这不起作用：

    class App extends React.Component {
        render() {
            return (
                <View style = { styles.container }>
                    {this._renderMapView.bind( this )}
                </View>
            );
        }

        _renderMapView () {
             return <MapView style = { styles.mapView } </MapView>
        }
   }

这有效：

    class App extends React.Component {
        render() {
            return (
                <View style = { styles.container }>
                    <MapView style = { styles.mapView } </MapView>
                </View>
            );
        }
   }

Answer 1

试试这个。不要使用bind(this)。

<View style = { styles.container }>
    {this._renderMapView()}
</View>

或使用bind(this)之类的：

<View style = { styles.container }>
    {this._renderMapView.bind(this)()}
</View>

因为你正在调用一个函数。

Answer 2

也许是因为_renderMapView没有返回任何内容？

 _renderMapView () {
          return  <MapView style = { styles.mapView } </MapView>
 }

Answer 3

试试这个，在return _renderMapView missing（）：

class App extends React.Component {
    render() {
        return (
            <View style = { styles.container }>
                {this._renderMapView.bind( this )}
            </View>
        );
    }

    _renderMapView () {
         return (<MapView style = { styles.mapView } </MapView>);
    }
 }

Answer 4

最后得到答案删除bind并添加return（）;

谢谢大家！

class App extends React.Component {
    render() {
        return (
            <View style = { styles.container }>
                {this._renderMapView()}
            </View>
        );
    }

    _renderMapView () {
         return (
             <MapView style = { styles.mapView } </MapView>
        );
    }
 }

如何渲染包含反应原生视图的函数？

4 个答案: