从 JSON 渲染 React Native 元素

Posted 2023-02-22

【中文标题】从 JSON 渲染 React Native 元素

【英文标题】：Render React Native Elements from JSON

【发布时间】：2017-08-11 02:48:07

【问题描述】：

我已经四处搜索...找不到我要找的东西，所以我很感激任何帮助！这就是我的目标：

我正在为 React Native 应用构建类似 CMS 的设置。这样，应用程序的管理员就可以登录到 CMS 仪表板，并更新应用程序的页面/视图，而无需进入硬编码。我希望他们能够从预设的组件列表中进行选择，并能够以他们想要的任何顺序将它们拖放到应用程序中，并且能够更新内容和颜色等。让我举个例子……

我想象有一个主页，顶部有一个旋转横幅，然后是一个用于信息模式的按钮，然后是一组用于转到子子页面的菜单链接。

所以我认为，在开发方面，是给应用管理员一个所见即所得类型的设置，并将结果存储在数据库中。它可以在数据库中存储为：

<RotatingBanner />
<Modal />
<ContentMenu>
    <ContentMenuLink title="About" />
    <ContentMenuLink title="Competitive" />
    <ContentMenuLink title="Recreational" />
    <ContentMenuLink title="Tournaments" />
<ContentMenu />

现在，当我尝试将它呈现到屏幕上时，我会继续让它呈现为实际的单词与它们所代表的组件，如果这有意义的话。所以页面看起来就像上面的代码块，而不是看到一个旋转的横幅和模式等。

我尝试了一种将 html 转换为 React Native 元素的工具...有人知道我如何转换获取的 JSON 格式，如下所示：

content: "<RotatingBanner /><Modal /><ContentMenu>...."

并让它在渲染函数中创建真正的组件？如果您愿意，我们将不胜感激有关创建此类 CMS 的任何其他想法或想法/建议。

谢谢！

【问题讨论】：

那么你基本上需要的是一个json控制的视图，对吧？您可以通过首先创建组件来简单地实现这种需求。像内容菜单、旋转横幅等，然后用地图功能渲染它们。 ` return this.jsonResponseElementsArray.map((value, index)=> switch(value) case 'rotatingBanner': return );` 我不能确定这是不是你想要的。如果我可以进一步帮助您，请告诉我

感谢您的输入...是的，我们的想法是之前已经创建了组件。然后在管理 CMS 区域中，管理员可以简单地选择并重新排序他们认为合适的，然后提交。这会将它作为我给出的 JSON 中的示例“内容”提交到数据库。我感到困惑的部分是如何呈现该内容。你给出了“this.jsonResponseElementsArray.map.......”的例子。我将不得不尝试一下，看看它是如何运作的，但似乎我必须让它意识到“价值”是每个元素

我的意思是 AFAIK，你不能从 json 请求中渲染视图和文本。您应该在编码时明确告知内容。对于我的示例，每个值只是特定组件的字符串。而已。更像一张地图

Gotcha ...好吧，我想我的基本问题是如何从 JSON 请求中呈现它。我想我将不得不继续思考如何制作这个 RN CMS。感谢您的意见

【参考方案1】：

假设你有这个 JSON：

const data = 
  "components": [
    "name": "component1", props: "hello": "world",
    "name": "component2", props: "color": "red",
  ]

制作您的组件，然后在对象（地图）中引用它们：

import Component1 from './Component1'
import Component2 from './Component2'

const COMPONENT_MAP = 
  component1: Component1,
  component2: Component2,

然后制作你的包装组件：

const Wrapper = (data) => (
  <View>
    data.components.map((name, props) => 
      const Component = COMPONENT_MAP[name]
      return <Component ...props />
    
  </View>
)

瞧 :)

<Wrapper data=data />

【讨论】：

谢谢@antoine129 l。我不这解决了 data = components: [ "<RotatingBanner /><Modal />" ]

的特定用例

确实，但是解决这个用例需要 JSX 解析，我建议不要这样做。

我认为这不能回答最初的用例，但我会给予奖励，因为至少你提出了理想的方案。

【参考方案2】：

我建议使用数组来保存和渲染多个孩子

const Component1 = () => <Text>One</Text>
const Component2 = () => <Text>One</Text>

const childs = [
  Component1,
  Component2
]
return childs

React 能够按原样呈现数组。 其他可能的解决方案是，

return Object.keys(child).map(item => childs[item] )

【参考方案3】：

快速解决方案可以是react-native-dynamic-render

此外，您可以使用它渲染嵌套组件。

一个完整的例子是here