Dynamic 是否可以在React Native中动态创建组件？

是否可以在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，我需要在React Native中动态构建视图。但是我看不到在JSX中编写JS代码的任何能力-只有静态视图和动态更改道具

是的，可以根据从服务器检索的数据在React Native中动态创建组件

但是，如果您希望应用程序检查最新的JS代码（包括新组件/视图），而不需要通过应用程序商店进行更新，您可以使用类似代码推送的方法

---

你的问题有些模糊，因此如果我误解了，那么你可以举一个例子“所有视图的信息”。

使用react native（vs webview）的好处之一是，当应用程序加载数据时，你的用户不会盯着空屏幕。若您从服务器返回所有视图，那个么它的工作方式就像web页面。我以前做过类似的事情。相信我，这不是最好的UX。理想情况下，json响应应该只返回数据。然后，可以使用任何框架（react native、iOS或Android native）构建客户端，它们共享相同的API端点。

是的，这是可能的。假设您成功检索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>
    )
}

render（）{
var productList=[]；
this.state.data.products.forEach（函数（tmpProduct）{
productList.push(
{tmpProduct.title}
{tmpProduct.description}
);
}.约束（这个）；
返回(
{productList}
)
}

我希望这段代码能给你一个想法。您可以根据您的情况进行调整。

React文档（扩展后也可以使用ReactNative完成）显示：

从“React”导入React；
从“/stories”导入{PhotoStory，VideoStory}；
常数分量={
照片：PhotoStory，
录像：录像故事
};
功能故事（道具）{
const SpecificStory=组件[props.storyType]；
返回；
}

---

这样做，您只需在JSON树上漫游，并使用

组件
对象作为JSON树中定义的类型与其构造函数之间的映射，即可创建ReactNative组件。
以下是另一种方法：-

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


const renderObject = {
  type : "View",
  children : [
    {
      type: "View",
      styles: {
        backgroundColor: "orange",
        flex:1,
        justifyContent:"center",
        alignItems: "center"
      },
      children: [
        {
          type: "Text",
          styles: {
            color: "yellow",
            fontSize: 20
          },
          text: "Hello"
        },
        {
          type: "View",
          styles: {
            backgroundColor: "red",
            width: 100,
            height: 5,
            marginTop: 10
          },
          children: []
        }
      ]
    },
    {
      type: "View",
      styles: {
        flex:1,
        justifyContent:"center",
        alignItems: "center"
      },
      children: [
        {
          type: "Text",
          styles: {
            color: "red",
            fontSize: 40
          },
          text: "Hello"
        }
      ]
    },
    {
      type: "View",
      styles: {
        flex:1,
        justifyContent:"center",
        alignItems: "center",
        backgroundColor: "green"
      },
      children: [
        {
          type: "Text",
          styles: {
            color: "white",
            fontSize: 80
          },
          text: "Hello"
        }
      ]
    }
  ],
  styles: {
    flex:1
  }
}

const CustomComp = (props) => {
  const {type} = props;
  if(type == "View"){
    const {styles, children} = props;
    return <View style={styles}>{children.map((item) => CustomComp(item))}</View>
  } else if(type == "Text") {
    const {styles, text} = props;
    return <Text style={styles} >{text}</Text>
  }
}

export default function App() {
  return (
    <View style={styles.container}>
      {CustomComp(renderObject)}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{样式表、文本、视图}；
常量renderObject={
键入：“查看”，
儿童：[
{
键入：“查看”，
风格：{
背景颜色：“橙色”，
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”
},
儿童：[
{
键入：“文本”，
风格：{
颜色：“黄色”，
尺寸：20
},
文字：“你好”
},
{
键入：“查看”，
风格：{
背景颜色：“红色”，
宽度：100，
身高:5,，
玛金托普：10
},
儿童：[]
}
]
},
{
键入：“查看”，
风格：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”
},
儿童：[
{
键入：“文本”，
风格：{
颜色：“红色”，
尺码：40
},
文字：“你好”
}
]
},
{
键入：“查看”，
风格：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：“绿色”
},
儿童：[
{
键入：“文本”，
风格：{
颜色：“白色”，
尺寸：80
},
文字：“你好”
}
]
}
],
风格：{
弹性：1
}
}
const CustomComp=（道具）=>{
const{type}=props；
如果（类型=“视图”）{
const{style，children}=道具；
返回{children.map（（项）=>CustomComp（项））}
}else if（类型==“文本”）{
const{style，text}=props；
返回{text}
}
}
导出默认函数App（）{
返回(
{CustomComp（renderObject）}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
为内容辩护：“中心”，
},
});

您可以在上找到完整的代码。
我已经添加了一些关于我的问题的说明，例如谢谢。但我的需求不同——您正在为已经创建的视图设置属性。在启动应用程序之前，您知道将创建哪些视图，并用代码（图像、文本、容器…）描述它们。但在我的例子中，我不知道将创建什么视图，因为所有关于类型的信息（文本、图像或按钮）都将在应用程序加载后来自服务器。我明白了，但即使在您的例子中，您也应该更好地预定义组件，然后在渲染函数中有选择地使用它们。您可以阅读和获取更多信息。请问先生，为什么您为每个产品视图指定了密钥？是否用于获取所选项目的产品id？@0x01Brain您最好阅读。基本上，
key
prop用于区分数组中的简单匿名组件，同时将这些数组呈现为列表。您最终找到了解决方案吗？我也在找类似的东西。
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


const renderObject = {
  type : "View",
  children : [
    {
      type: "View",
      styles: {
        backgroundColor: "orange",
        flex:1,
        justifyContent:"center",
        alignItems: "center"
      },
      children: [
        {
          type: "Text",
          styles: {
            color: "yellow",
            fontSize: 20
          },
          text: "Hello"
        },
        {
          type: "View",
          styles: {
            backgroundColor: "red",
            width: 100,
            height: 5,
            marginTop: 10
          },
          children: []
        }
      ]
    },
    {
      type: "View",
      styles: {
        flex:1,
        justifyContent:"center",
        alignItems: "center"
      },
      children: [
        {
          type: "Text",
          styles: {
            color: "red",
            fontSize: 40
          },
          text: "Hello"
        }
      ]
    },
    {
      type: "View",
      styles: {
        flex:1,
        justifyContent:"center",
        alignItems: "center",
        backgroundColor: "green"
      },
      children: [
        {
          type: "Text",
          styles: {
            color: "white",
            fontSize: 80
          },
          text: "Hello"
        }
      ]
    }
  ],
  styles: {
    flex:1
  }
}

const CustomComp = (props) => {
  const {type} = props;
  if(type == "View"){
    const {styles, children} = props;
    return <View style={styles}>{children.map((item) => CustomComp(item))}</View>
  } else if(type == "Text") {
    const {styles, text} = props;
    return <Text style={styles} >{text}</Text>
  }
}

export default function App() {
  return (
    <View style={styles.container}>
      {CustomComp(renderObject)}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});