React Nativeでコンポーネントを動的に作成することはできますか？

Question

React Nativeでビューコンポーネントを動的に作成して追加することはできますか？ たとえば、空の画面しかなく、すべてのビューの情報はJSONのサーバーから取得され、画面上に生成する必要があります。 たとえば、アプリケーションがサーバーからjsonを取得しています。このJSONは持っている画面を建てることを説明します。

{ 
    "type": "linearlayout", 
    "subviews": [{ 
     "type": "text", 
     "fields": { 
      "text": "This is text field" 
     }, 
     "styles": { 
      "color": "", 
      "textSize": 14 
     } 
    }, { 
     "type": "button", 
     "fields": { 
      "text": "JUST BUTTON" 
     }, 
     "transition": { 
      "name": "http://www.link.com" 
     } 
    }, { 
     "type": "text", 
     "fields": { 
      "text": "This is another text field" 
     }, 
     "styles": { 
      "color": "", 
      "textSize": 18 
     } 
    }] 
} 

ので、そのJSONで私が動的に必要に構築景色ネイティブ反応します。 JSXの中にJSコードを記述する機能はありません。スタティック・ビューと小道具の動的変更

Answer 1

はいReact Nativeでサーバーから取得するデータに基づいてコンポーネントを動的に作成することは可能です。

しかし、アプリストアを通じて更新する必要なく、最新のJSコード（新しいコンポーネント/ビューを含む）をチェックするようにしたい場合は、code-pushのようなものを使用できます。 https://microsoft.github.io/code-push/

あなたの質問はやや曖昧ですので、私が誤解した場合は、「すべてのビューの情報」の例を挙げることができます。

Answer 2

反応ネイティブ（vs webview）を使用する利点の1つは、アプリがデータを読み込んでいるときにユーザーが空の画面を見つめないことです。サーバーからすべてのビューを返すと、Webページのように機能します。私はこれまでにそういったことをしてきました。最高のUXではないと私に信じてください。理想的には、jsonレスポンスはデータを返すだけです。クライアントは任意のフレームワーク（ネイティブ、iOS、またはAndroidネイティブに対応）で構築でき、同じAPIエンドポイントを共有します。

Answer 3

はいこれが可能です。 JSONデータを正常に取得し、それをある状態に保存してから、レンダリング関数でそのように使用できると仮定します。

render() { 
    var productList = []; 

     this.state.data.products.forEach(function (tmpProduct) { 
      productList.push(
       <View style={cardView} key={tmpProduct.id}> 

        <Grid style={upperGrid}> 
         <Col style={{flex: 0.5}}> 
          <Thumbnail 
           source={require('../../../images/sample-image.png')} 
           style={itemThumb}> 
         </Col> 
         <Col> 
          <Text style={cardItemHeader} numberOfLines={2}>{tmpProduct.title}</Text> 
          <Text style={cardItemBody} numberOfLines={2}>{tmpProduct.description}</Text> 
         </Col> 
        </Grid> 
       </View> 
      ); 
     }.bind(this)); 

    return (
     <Container theme={theme}> 
      <Image source={require('../../../images/grad-bg.png')} style={background} > 

       <Content style={scrollContent}> 

        {productList} 

       </Content> 

      </Image> 
     </Container> 
    ) 
} 

このコードを参考にしてください。あなたはあなたのケースにそれを適応させることができます。

Answer 4

は、ドキュメントに反応（ひいては、それはあまりにもReactNativeで行うことができる）how to choose the component type at runtimeを示しています。

そう

import React from 'react'; 
import { PhotoStory, VideoStory } from './stories'; 

const components = { 
    photo: PhotoStory, 
    video: VideoStory 
}; 

function Story(props) { 
    const SpecificStory = components[props.storyType]; 
    return <SpecificStory story={props.story} />; 
} 

、あなただけの、あなたのJSONツリーの上を歩く必要があり、ちょうどReactNativeコンポーネントを作成し、使用することができcomponentsオブジェクトは、JSONツリーで定義された型とそのコンストラクタの間のマッピングとして使用されます。