如何在 React Native 中将 ScrollView 与第三方组件一起使用？答案

【问题标题】：How to use ScrollView with third party Components in React Native?如何在 React Native 中将 ScrollView 与第三方组件一起使用？
【发布时间】：2018-08-07 00:47:25
【问题描述】：

很简单，在使用第三方（react-native-elements）List/List-Items时如何使用ScrollView？给定的文档没有告知这一点：link

列表完全正常，但无法滚动：

这里是渲染列表的代码：

<View style={{ flex: 1 }}>
    <List>
        {
            list.map((l, i) => (
                <ListItem
                    roundAvatar
                    key={i}
                    title={l.name}
                    subtitle={
                        <View>
                            <View style={styles.subtitleView}>
                                <Text style={styles.ratingText}>{l.subtitle}</Text>
                            </View>
                        </View>
                    }
                    avatar={<Avatar
                        medium
                        rounded
                        source={l.avatar_url && { uri: l.avatar_url }}
                        title={l.name[0]}
                    />}
                />
            ))
        }
    </List>
</View>

如果我只是将 View 更改为 ScrollView，这应该是显而易见的举动，我会收到以下错误：

我正在从 native-base 导入 ScrollView，从 react-native-elements 导入 List。

【问题讨论】：

标签： node.js react-native

【解决方案1】：

尝试在您的View 下添加ScrollView，同时在ScrollView 下添加额外的View（非必需）。

<View style={{ flex: 1 }}>
  <ScrollView>
   <View>
    <List>
        {
            list.map((l, i) => (
                <ListItem
                    roundAvatar
                    key={i}
                    title={l.name}
                    subtitle={
                        <View>
                            <View style={styles.subtitleView}>
                                <Text style={styles.ratingText}>{l.subtitle}</Text>
                            </View>
                        </View>
                    }
                    avatar={<Avatar
                        medium
                        rounded
                        source={l.avatar_url && { uri: l.avatar_url }}
                        title={l.name[0]}
                    />}
                />
            ))
        }
    </List>
   </View>
  </ScrollView>
</View>

还可以考虑使用 FlatList 而不是 ScrollView 以获得更好的性能。

参考：

https://facebook.github.io/react-native/docs/scrollview

https://facebook.github.io/react-native/docs/flatlist

【讨论】：

Omg...这实际上是最糟糕的错误，我是从native-base而不是react-native导入的，当我在URL中看到react-native时，我更改了导入并工作...我会尝试按照建议使用 FlatList 来做，无论哪种方式都会给你正确的答案。谢谢。
无法让 FlatList 与当前的渲染代码一起工作，尝试使用 list.map 作为 renderItem 但没有成功。