我想讓交互式圖表在我的React Native應用程序中工作。我知道可能還沒有製作一個React Native特定的庫,但是我應該研究什麼Objective-C/Swift/Javascript庫,這將允許我製作看起來像Chart.js生成的圖表/圖表?React Native的等效圖表.js
回答
你會想看看Obj-C和Swift,而不是我認爲的JavaScript。現有的JS庫將繪製到DOM,Canvas或其他瀏覽器目標,這些目標在React Native中不可用。這應該縮小領域一點。然後從RN直接使用它,你需要在JS和Obj-C之間創建一個Native Module。
所以在這一點上歸結爲:「什麼是一個好的iOS圖表庫」,幸運的是有人已經在那個over on this answer上完成了艱苦的工作。 Core Plot看起來很全面。
我可以使用類似這樣的東西,https://github.com/lwansbrough/react-天然帆布?我仍然認爲它不適用於原生反應,因爲我需要用這個反應本地畫布覆蓋chartjs畫布。試圖找出什麼是可能的和合理的。 – 2015-04-22 15:46:47
我會去爲ART library的react-native項目。
以下是針對ReactJS的chart example,您可以通過查看這些React-native Art示例來適應react-native。
此外,可能需要調查的內容有Chartist library,它們使用SVG繪製圖表,並且有reactjs component。
編輯:從版本0.18rc開始,React-Native也支持ART library for Android。
http://fraserxu.me/react-chartist/看起來很有希望。你知道這是否應該與react-native兼容?我不明白如何確定與react-native的兼容性。根據我的經驗,如果它沒有「react-native- *」前綴,它將不起作用。 (我是一個Javascript和反應,原生新手) – 2016-03-22 13:27:56
react-chartist是爲瀏覽器編寫的,所以與react-native不兼容(我沒有嘗試但應該在webview中工作)。要繪製「原生」圖表,所有的繪圖邏輯需要寫入... – Sulliwane 2016-03-25 01:06:10
謝謝@Sulliwane。我會給webview + react-chartist一個嘗試。這應該是值得的時間投資。我無法找到支持* Android和iOS的反應原生圖組件。 – 2016-03-25 02:10:11
雖然這可能在理論上回答這個問題,[最好](// meta.stackoverflow.com/q/8259)在這裏包含答案的基本部分,並提供參考鏈接。 – 2016-10-25 07:57:02
- 1. React JS v React Native
- 2. 等效於React Native中的「畫布」
- 3. 創建XY圖表,React-Native
- 4. React native bundlle js卡住
- 5. React Native - 無頭JS示例
- 6. ReactDOM和document.body在React Native中的等效變量是什麼? (Expo)
- 7. 反應導航等效於React-Native-Router-Flux中的Action.Main
- 8. 在React Native中使用ES6的getDefaultProps函數等效於什麼?
- 9. 圖形庫 - React Native
- 10. React Native Native Stylesheet
- 11. React-Native傳遞給其他js的Textinputvalue
- 12. 拉動React Native的視圖
- 13. React Native中的react-native run-android
- 14. 列表視圖vs react-native-collapsible
- 15. React-Native從RCTPerfMonitor獲取UI和JS FPS
- 16. React-Native:在JS線程上運行
- 17. react-native:引用外部JS文件
- 18. React Native在導出之前等待AsyncStorage
- 19. React native不會顯示來自其他js文件的視圖
- 20. React Native的http'polyfill
- 21. react-native react-native-vector-icons:如何使用字體真棒圖標
- 22. react-native - 如何使用react-native-maps顯示地圖
- 23. React-Native RTC視圖重疊
- 24. React Native - Android - 進程意圖
- 25. React-Native動態圖像源?
- 26. React Native如何LazyLoad圖像
- 27. React-Native圖像查看器?
- 28. react-addons-transition-group的「componentWillLeave」等價於React Native?
- 29. React Native,AwesomeProject,react-native run-ios:** BUILD FAILED **
- 30. react-native run-android and react-native開始
對於React Native和React中的圖表,請使用勝利: https://formidable.com/open-source/victory/gallery – 2017-08-04 12:34:52