Question

这是本教程的链接（https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6），我从这里开始学习本机。一切工作正常，除了视图不滚动

 import React, { Component } from 'react';
 import { FlatList, Text, View } from 'react-native';
 import { List, ListItem } from "react-native-elements";

 type Props = {}
 export default class FlatListDemo extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
        loading: false,
        data: [],
        page: 1,
        seed: 1,
        error: null,
        refreshing: false,
    };
}

componentDidMount() {
    this.makeRemoteRequest();
}

makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    this.setState({
        loading: true
    });

    fetch(url)
        .then(res => res.json())
        .then(res => {
            this.setState({
                data: page === 1 ? res.results : [...this.state.data, ...res.results],
                error: res.error || null,
                loading: false,
                refreshing: false
            })
        })
        .catch(error =>
            this.setState({
                error,
                loading: false
            })
        )
};
renderSeparator = () => {
    return (
        <View
            style={{
                height: 1,
                width: "86%",
                backgroundColor: "#CED0CE",
                marginLeft: "14%"
            }}
        >
        </View>
    )
};



render() {
    return (
        <FlatList
            data={this.state.data}
            renderItem={({ item }) => (
                <ListItem
                    roundAvatar
                    title={`${item.name.first} ${item.name.last}`}
                    subtitle={item.email}
                    avatar={{ uri: item.picture.thumbnail }}
                    containerStyle={{ borderBottomWidth: 0 }}
                />
            )}

            ItemSeparatorComponent={this.renderSeparator}
            onEndReachedThreshold={50}
        />        )
}}

必须使用ScrollView来滚动本机视图还是我们可以做到使用任何CSS或其他方式

Answer 1

当我尝试在以下给定链接中运行此代码时：https://snack.expo.io/rkOsCaiD7以找到解决方案，发现滚动视图在上述代码下工作正常。只需尝试以本机的响应方式重新加载并运行它，我认为它可以解决您的问题。

没有ScrollView，反应本地视图是否无法滚动

1 个答案: