javascript - React Native 中的滚动视图
问题描述
我创建了一个简单的应用程序,它显示了一些带有标题的图片。它就像一个电影画廊,您可以在其中观看所有启用电影。但是当我尝试添加 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 的作者在他的视频中没有这个问题)。
解决方案
内部看起来有问题View
。ScrollView
尝试类似:
<ScrollView contentContainerStyle={container} >
{
data.map(item => {
return <ImageCard data={item} key={item.id} />
})
}
</ScrollView>
推荐阅读
- ios - 如何使用 Swift 在 Xcode 中使用切换开关关闭背景音乐?
- flutter - 如何使用 Flutter 创建管理 UI 左侧菜单
- python - 使用 manage.py 运行服务器时收到错误
- html - 媒体查询未在 CSS 网格上正确应用?
- flutter - 替换飞镖中的变量
- javascript - 反应:淡入淡出幻灯片不起作用。如何解决?
- python - 使用 Spark 3 加载 PipelineModel 时出现 AnalysisException
- jquery - jquery 更改 & 由?在第一个参数上
- clickhouse - 物化视图填充不正确
- ios - SwfitUI @FetchedResults 一对多关系没有正确更新