ReactJs Component在cordovas onDeviceReady函数之前呈现

Question

ReactJs Component在cordovas onDeviceReady函数之前呈现

我目前正在尝试使用React JS(v.0.14)和cordova.我想用一个带有cordova文件插件的Android模拟器的SD卡读取一些文件.

当我尝试启动应用程序时,我总是得到错误,这cordova.file.*是未定义的.发生这种情况是因为,React组件在onDeviceReady调用cordova之前呈现.我在ReactDOM.render函数内部添加了函数onDeviceReady,但这不起作用.

app.js

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        console.log('on ready');    // Update DOM on a Received Event

        ReactDOM.render(
          <App />,
          document.getElementById('app')
        );
    }
};
app.initialize();

var App = React.createClass({
    getInitialState: function() {
        return {tiles:[]};
    },

    componentDidMount: function() {
        var PATH = cordova.file.externalRootDirectory + 'testdir/'; //Is called before onDeviceReady

    },

    render: function() {
        return (
            <div>
                <Navigation title="Dashboard"/>
                <Dashboard tiles={this.state.tiles}/>
            </div>
        );
    }
});

Run Code Online (Sandbox Code Playgroud)

index.html的:

<body>
        <!-- fixed top navbar -->
        <div id="app">

        </div>
        <!-- Dashboard -->

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="bower_components/react/react.js"></script>
        <script type="text/javascript" src="bower_components/react/react-dom.js"></script>
        <script type="text/javascript" src="js/browser.min.js"></script>
        <script type="text/babel" src="js/app.js"></script>
    </body>

Run Code Online (Sandbox Code Playgroud)

来自控制台的错误消息是:

Uncaught TypeError: Cannot read property 'externalRootDirectory' of undefined ...
on ready

Run Code Online (Sandbox Code Playgroud)

如何在之后或之后加载我的React组件onDeviceReady？

谢谢和问候,mybecks

Answer 1

Igo*_*ães 1

就我而言，我正在等待设备信息。

也看看这里的这个链接。

通过此链接，我想出了以下代码：

function initApp () {
    ReactDOM.render(<App />, document.getElementById('root'));
};

if (window.cordova) {
    document.addEventListener("deviceready", () => {
        initApp();
    }, false);
} else {
    initApp();
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	887 次
最近记录：	8 年，3 月前