React Native 中的滚动视图答案

【问题标题】：ScrollView in React NativeReact Native 中的滚动视图
【发布时间】：2021-06-26 08:45:27
【问题描述】：

我创建了一个简单的应用程序，它显示了一些带有标题的图片。它就像一个电影画廊，您可以在其中观看所有启用电影。但是当我尝试添加 ScrollView 元素时，当我尝试在我的模拟 Android 设备上滚动时它不起作用。我该如何解决？我的代码如下所示：

import React, { Component } from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { Header, ImageCard } from './src/components/uikit'

const url = 'https://s3.eu-central-1.wasabisys.com/ghashtag/RNForKids/00-Init/data.json'

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: 'STAR GATE',
      data: []
    };
  }

  componentDidMount = async () => {
    try {
      const response = await fetch(url)
      const data = await response.json()
      this.setState({ data })
    }
    catch (e) {
      console.log(e)
      throw e

    }
  }

  render() {
    const { title, data } = this.state
    const { container } = style

    return (
      <View>
        <Header title={title} />
        <ScrollView>
          <View style={container}>
            {
              data.map(item => {
                return <ImageCard data={item} key={item.id} />
              })
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}

const style = StyleSheet.create({
  container: {
    marginTop: 30,
    flexDirection: 'row',
    flexWrap: 'wrap',
    flexShrink: 2,
    justifyContent: 'space-around',
    marginBottom: 150
  }

})

我是用指南制作的，所以它应该可以工作。（Youtubes作者的视频没有这个问题）。

【问题讨论】：

标签： javascript reactjs react-native scrollview

【解决方案1】：

ScrollView 内部的 View 看起来有问题。尝试类似：

        <ScrollView contentContainerStyle={container} >
            {
              data.map(item => {
                return <ImageCard data={item} key={item.id} />
              })
            }
        </ScrollView>

【讨论】：

它可能对我未来的项目有用，非常感谢，但对于我目前的情况，它不起作用，简单的应用重新加载有帮助。