ReactJs組件呈現之前cordovas onDeviceReady函數

我目前正在試驗React JS（v.0.14）和科爾多瓦。我想用cordova文件插件從Android模擬器的SD卡讀取一些文件。ReactJs組件呈現之前cordovas onDeviceReady函數

當我嘗試啓動應用程序時，我總是收到錯誤，說明cordova.file.*未定義。發生這種情況是因爲在調用cordova onDeviceReady之前渲染了React組件。我在onDeviceReady函數中添加了ReactDOM.render函數，但這不起作用。

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

的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>

從控制檯的錯誤信息是：

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

我如何可以加載我的後或反應的組分onDeviceReady？

感謝&映入眼簾， mybecks

來源

2015-11-06 mybecks

這方面的任何解決方案？ –

-1

在我的情況，我在等待的設備信息。

看看這個鏈接here了。

按照這個環節，我想出了這個代碼：

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

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

來源

2017-10-06 12:02:17

它不起作用！ –

ReactJs組件呈現之前cordovas onDeviceReady函數

回答

相關問題