Question

很简单，当使用第三方（反应本机元素）列表/列表项时，如何使用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。

Answer 1

尝试在ScrollView下制作View，并在View下添加其他ScrollView（不是必需的）。

<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

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

1 个答案: