时间戳

首页 > 解决方案 > 如何在 React Native 中使用 FlatList 和 webView 显示数据？

javascript - 如何在 React Native 中使用 FlatList 和 webView 显示数据？

问题描述

我创建了 flatList 并且正在传递对象数组。每个对象都有标题和数据数组。在 FlatList 的 renderItem 中，我试图显示作为标题的文本，但它给出的错误为null. 如何使用 flatList 显示数据，即我想显示每个对象数组的标题和数据键。

示例数据： 在此处输入图像描述

代码：

<FlatList
                    data={specificationsData}
                    showsVerticalScrollIndicator={false}
                    renderItem={({item}) =>
                    <View style={styles.flatview}>
                        <Text style={styles.name}>{item.title}</Text>                     
                        <WebView originWhitelist={['*']}
                        source={{ html: item.data }}/>  <--- gives error
                    </View>
                    }
                    />

我想显示来自每个对象和标题的 html 数据，以便它item.title正确显示为文本但 item.data 如果我在 WebView 中传递 item.data 不起作用如何使用 webView 和 FlatList 显示 HTML 内容？

标签： javascriptreactjsreact-native

解决方案

我建议您尝试使用https://github.com/archriss/react-native-render-html库来显示 HTML 内容，而不是 webView 。

也许是这样的：

...
import HTML from 'react-native-render-html';
...
<FlatList
    data={specificationsData}
    showsVerticalScrollIndicator={false}
    renderItem={({item}) =>
    <View style={styles.flatview}>
        <Text style={styles.name}>{item.title}</Text>                             
        <HTML html={item.data} />
    </View>
    }
/>

推荐阅读