React Native 加载屏幕（条件渲染）答案

【问题标题】：React Native loading screen (conditional render)React Native 加载屏幕（条件渲染）
【发布时间】：2015-12-09 14:55:22
【问题描述】：

当 HTTP 调用完成时，我正在尝试在 React Native Android 应用程序中呈现视图。

我的渲染方法：

render: function() {
    if (this.state.obj.name) {
        return this.renderPage();
    } else {
        return (<Loading />);
    }
}

包含显示“正在加载”的简单视图和文本元素。

我在componentDidMount()中调用网络请求：

componentDidMount: function() {
    var self = this;

    SomeService.getObjById(1).then(function(data) {

        var obj = JSON.parse(data._bodyText);

        self.setState({
            obj: obj
        });
    });
},

但是，当我更新状态并实例化“obj”（现在有一个名称 prop）时，渲染被调用，它返回渲染页面但视图没有更新。

我的 renderPage 方法在它很轻时可以工作：

renderPage: function() {
    return (
        <View><Text>Hello</Text></View>
    )
}

但是当它有超过 6 行代码时，它似乎不会更新。

知道为什么事件在调用完成时虽然条件返回不同的组件，但实际视图没有更新？

【问题讨论】：

我已经在 rnplay.org/apps/nqcBQA 使用一些模拟数据设置了您的问题。你可以在那里复制这个问题吗？几行代码似乎返回得很好。谢谢。
谢谢，我会试一试
我在 android 端实现了你所做的，但它不起作用...rnplay.org/apps/LTw07A 知道为什么吗？ RNPlay 新手
如果你说的是 UIManager 错误，这与他们的结局有关，我的应用程序现在都没有在他们的 android 模拟器上运行。
啊，我应该说它是一个Android应用程序，我会更新，不过谢谢。

标签： javascript android reactjs react-native react-jsx

【解决方案1】：

我通过在改变视图之前提出请求来解决这个问题。

这仍然不起作用，但我在 navigator.push() 周围添加了一个 setTimout(function(){}, 0) 并且它起作用了，因为它将“推送”推到调用堆栈的末尾。

不惊人，但有效

【讨论】：