React Native 中的滚动视图

Question

我创建了一个简单的应用程序，它显示了一些带标题的图片。它有点像电影画廊，您可以在其中观看所有启用的电影。但是当我尝试添加 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
  }

})

我是在向导的帮助下制作的，所以应该可以。（Youtube 作者在他的视频中没有这个问题）。

Answer 1

ScrollView 里面的 View 看起来有问题。尝试类似的东西：

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

React Native 中的滚动视图

ScrollView in React Native

javascript

scrollview

reactjs

react-native