React native - 在页面加载时从 JSON 动态添加组件

Question

我正在学习 React Native 并且想要构建一个应用程序（Android 和 IOS），当页面加载，从 JSON 文件中提取每个组件的数据。

例如，该页面的 JSON 可能有 3 个文本项和一个图像，然后加载将构建这些组件并显示在页面上。

这是否可行？如果可行，我应该如何将代码放置在何处 - 例如 Hooks，View 组件中的 useEffect()？这会不会成为一个问题，因为我相信 useEffect 会被调用两次——一次是在添加新组件之前，一次是在添加新组件之后。

此外，理想情况下，组件可能是嵌入式的 - 例如，一个组件与另一个嵌入的组件用于不同的样式，或者 link 例如

<Text style={mainStyles.heading}>a test <Text style={mainStyles.p}>embedded</Text> text component</Text>

或

<Text style={mainStyles.heading}>a URL link <Text style={mainStyles.p} onPress={() => Linking.openURL("https://www.microsoft.com")}> Microsoft</Text> text component</Text>

最后，当在页面之间导航时，它需要通过某种方式将值传递给传入页面，以便它知道要导入哪个 JSON（即在网络术语中，查询字符串、cookie 或本地存储值）

这可能吗？

Answer 1

动态组件

您可以使用 <FlatList>。这将获取一个事物列表，并为该列表中的每个项目创建一个“组件”。

因此，如果您有一个项目列表，并且每个“项目”都有 4 个属性，例如：item = { text1, text2, text3, pic } 那么您的 FlatList 可能如下所示：

<FlatList
  data={exampleList}
  keyExtractor={({ item, index }) => index}
  renderItem={({ item, index }) => (
    <View>
      <Text>{item.text1}</Text>
      <Text>{item.text2}</Text>
      <Text>{item.text3}</Text>
      <Image source={item.pic} />
    </View>
  )}
/>

因此，您可以将多个 JSON-files 解析为这些“项目”的列表（假设它们都有 3 个文本和 1 张图片）。

是的，您可以将 onPress 添加到 <View> 或您需要的任何内容。

将值传递到下一个屏幕

因此，带有 HTTP-addresses 的示例，您通常可以添加 GET-data，就像您提到的那样。

但是，您经常希望将数据发送到您自己的屏幕。在这种情况下，您需要进行一些导航。因此，如果您当前可以通过 navigate() 切换屏幕，则可以传递其他参数。这些将在第二个屏幕中通过以下方式访问； props.route.params

因此，navigate("LoadJSONPage","test42.json") 并且在“LoadJSONPage”中，您可以通过 props.route.params 访问参数“test42.json”。你当然可以发送多个参数，但访问时必须指定索引； props.route.params[0] 将是 "test42.json"

React native - 在页面加载时从 JSON 动态添加组件

React native - adding components dyanmically from JSON on page load

javascript

dynamic

react-native

react-hooks

动态组件

将值传递到下一个屏幕