跨平臺React本機文件結構

我來自Ionic 2，在那裏我寫了一次代碼，並且它到處運行。跨平臺React本機文件結構

根據此頁面https://facebook.github.io/react-native/docs/platform-specific-code.html「構建跨平臺應用程序時，您需要儘可能多地使用代碼。」

如何在ReactNative中跨iOS和Android「重複使用」代碼？在初學者應用程序中，我看到兩個文件：index.ios.js和index.android.js。有沒有像我可以用於跨平臺共享的index.js？

似乎應該有一個可共享代碼的文件，因爲上面提到的網頁也顯示瞭如何使用平臺模塊來檢查你的操作系統。

我意識到有時你需要不同平臺上的不同行爲，但是，假設我的應用足夠簡單，並且我的代碼在兩個平臺上都完全相同，是否必須從一個平臺複製/粘貼到另一個平臺？我怎樣才能將相同的功能放到它自己的文件中以便在兩個平臺上共享？

我錯過了什麼？

謝謝！

來源

2016-07-21 Anthony Tietjen

以下是您可以做的事情。創建一個文件，說main.js將作爲您的根頁面。

main.js

import React, { Component } from 'react'; 
import { Text } from 'react-native'; 

export default class Main extends Component { 
    render() { 
    return (
     <Text>Hello world! from both IOS and Android</Text> 
    ); 
    } 
}

現在您index.android.js和index.ios.js進口是主要文件，並使用AppRegistry註冊主要組件作爲根。

index.android.js和index.ios.js

import React from 'react'; 
import { 
    AppRegistry 
} from 'react-native'; 
import Main from './main'; 

AppRegistry.registerComponent('DemoApp',() => Main);

如果您運行 react-native run-android和 react-native run-ios的主要組件

將呈現兩個平臺。

所有組件均帶否IOS和Android後綴適用於兩種平臺。像Navigator適用於ios和android，但NavigatorIOS僅適用於ios。所以你必須確保你使用的是跨平臺組件。

如果您需要使用特定於平臺的組成部分，那麼你可以使用平臺檢測登錄這樣做：

import { Platform } from 'react-native'; 
if(Platform.OS === 'ios').....

或

if(Platform.OS === 'android')...

來源

2016-07-21 17:44:49

完美。謝謝！ –

跨平臺React本機文件結構

回答

相關問題