クロスプラットフォーム・リアクションネイティブ・ファイル構造

Question

私はコードを一度書くだけでどこにいても、どこでも動いています。

このページによるhttps://facebook.github.io/react-native/docs/platform-specific-code.html「クロスプラットフォームアプリケーションを構築するときは、できるだけ多くのコードを再利用したいと思うでしょう。」

ReactNativeでiOSとAndroidでコードを「再利用」するにはどうすればよいですか？スターターアプリでは、index.ios.jsとindex.android.jsという2つのファイルが表示されます。プラットフォーム間で共有するために使用できるindex.jsのようなものがありますか？

上記のWebページには、Platformモジュールを使用してどのOSが動作しているかを確認する方法が示されているので、共有可能なコード用に1つのファイルがあるようです。

さまざまなプラットフォームで異なる動作が必要な場合がありますが、私のアプリケーションが十分単純で、コードが両方のプラットフォームで全く同じになると仮定すると、コピー/貼り付けが必要です？どのようにして、同じ機能を両方のプラットフォームで共有するための独自のファイルに引き込むことができますか？

私には何が欠けていますか？

ありがとうございます！

Answer 1

あなたができることは次のとおりです。ルートページとして機能するmain.jsというファイルを作成します。

main.jsあなたindex.android.jsとindex.ios.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> 
    ); 
    } 
} 

インポートメインファイルとルートとして登録し、あなたのメインコンポーネント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メインコンポーネントを実行する場合は、両方のプラットフォーム用にレンダリングされます。

NoIOSおよびAndroid接尾辞は両方のプラットフォームで機能します。 Navigatorのように、iosとandroidの両方で動作しますが、NavigatorIOSはiosでのみ動作します。クロスプラットフォームコンポーネントを使用していることを確認する必要があります。

あなたは、プラットフォーム固有のコンポーネントを使用する必要がある場合は、あなたがそうするようにプラットフォーム検出ログインを使用することができます。

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

または

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