Question

我是编程和react-native的新手，我试图制作一个Scrollview并从JSON文件中获取值，并在每行中显示2个框，但是当我使用flexDirection : 'row'时全部合并在一起。

感谢您的帮助。以下部分是我的代码：

export default class Creative extends Component {

    constructor(props) {
        super(props);
        this.state = { isLoading: true, refreshing: false, }
    }

    _fetchData = () => {
        const key = 'D0BEFCE031A955294DE1DD87C14B13EA77CBF8A86F293FD30E9B8D57F3C401F9';
        var type = 'creative';
        const lal = `imapp=${key}&type=${type}`;
        fetch('https://facebook.github.io/react-native/movies.json', {
            method: 'get',
            headers: new Headers({
                'Content-Type': 'application/x-www-form-urlencoded', // <-- Specifying the Content-Type
            }),
        }).then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.list,
                    refreshing: false,
                });

            })
            .catch((error) => {
                console.error(error);
            });
    }

    componentDidMount() {
        this._fetchData();
    }

    _onRefresh = () => {
        () => this.setState({ refreshing: true, });
        status = '1';
        this._fetchData();
    }

    render() {
        return (
            <SafeAreaView>
                <View style={{ backgroundColor: '#323232' }}>
                    <View style={{ flex: 1, paddingTop: 20 }}>
                        <View style={{ flex: 1, paddingTop: 20 }}>
                            <FlatList
                                data={this.state.dataSource}
                                renderItem={({ item }) => <Text>{item.title}, {item.releaseYear}</Text>}
                                keyExtractor={({ id }, index) => id}
                            />
                        </View>
                    </View>
                </View>
            </SafeAreaView>
        );
    }
}

Answer 1

在ReactNative Flatlist中使用numColumns来呈现多列并按如下所示更改Flatlist

<FlatList
    data={this.state.dataSource}
    renderItem={({ item }) => (
        <View style={{ width: '40%', justifyContent: 'space-between', backgroundColor: 'red', margin: 5 }}>
            <Text>{item.title}, {item.releaseYear}</Text>
        </View>
    )}
    keyExtractor={item => item.id}
    numColumns={2}
/>

根据您的要求进行更改。

希望这对您有所帮助。放心怀疑。

使带有水平行的垂直滚动视图做出反应

1 个答案: