React Native ScrollView在iOS中不工作

我正在学习关于React Native的教程。当我尝试在我的应用程序中实例化ScrollView时，它不起作用。没有错误，没有红色屏幕，它根本不会滚动过五个元素中的第二个

下面是我的index.ios.js的代码

//imports a library
import React from 'react';
import { AppRegistry, View } from 'react-native';

import Header from './src/Components/Header';
import AlbumList from './src/Components/AlbumList';
// import AlbumDetail from './src/Components/AlbumDetail';


//create Component
const App = () => {
    return (
    <View style={{ flex: 1 }}>
      <Header headerText={'Albums'} />
      <AlbumList />
    </View>
  );
};

//renders component
AppRegistry.registerComponent('albums', () => App);

//导入库
从“React”导入React；
从“react native”导入{AppRegistry，View}；
从“./src/Components/Header”导入标题；
从“/src/Components/AlbumList”导入AlbumList；
//从“/src/Components/AlbumDetail”导入AlbumDetail；
//创建组件
常量应用=（）=>{
返回(
);
};
//渲染组件
AppRegistry.registerComponent（'albums'，（）=>App）；

下面是组件列表的代码

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
//axios was npm installed it is a tool for HTPPRequests
import axios from 'axios';
//importing component to use inside of class component
import AlbumDetail from './AlbumDetail';

//This makes a class component which can handle data
class AlbumList extends Component {
  //sets state to an object with a key value pair
  state = { albums: [] };
  //when the page loads the HTTPrequest is done asynch
  componentWillMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
      .then(response => this.setState({ albums: response.data }));
  }
  //this grabs the info coming in from the HTTPRequest and puts it into a component
  renderAlbums() {
    return this.state.albums.map(album =>
      //album= is setting the prop for the component, it is not necessary to name it album
      <AlbumDetail key={album.title} album={album} />);
  }
  //renders the class component
  render() {
    return (
        <ScrollView>
          { this.renderAlbums() }
        </ScrollView>
      );
    }
  }

import React，{Component}来自'React'；
从“react native”导入{ScrollView}；
//axios是npm安装的，它是用于HTPPRequests的工具
从“axios”导入axios；
//导入要在类组件内部使用的组件
从“/AlbumDetail”导入AlbumDetail；
//这使得类组件可以处理数据
类列表扩展组件{
//将状态设置为具有键值对的对象
状态={相册：[]}；
//当页面加载时，HTTPrequest是异步完成的
组件willmount（）{
axios.get（）https://rallycoding.herokuapp.com/api/music_albums')
.then（response=>this.setState（{albums:response.data}））；
}
//这将获取来自HTTPRequest的信息并将其放入组件中
renderAlbums（）{
返回此.state.albums.map（album=>
//album=正在为组件设置道具，无需将其命名为album
);
}
//呈现类组件
render（）{
返回(
{this.renderAlbums（）}
);
}
}

最后，这里是AlbumDetail组件的代码

import React from 'react';
import { Text, View, Image } from 'react-native';
import Card from './Card';
import CardSection from './CardSection';

//We setup the prop being passed into this compnent in the AlbumList component
//{this will grab our prop "album" and then accesses the title key's value}

const AlbumDetail = ({ album }) => {
  const { title, artist, thumbnail_image, image } = album;
  return (
    <Card>
      <CardSection>
        <View style={styles.thumbnailContainterStyle}>
          <Image
          style={styles.thumbnailStyle}
          source={{ uri: thumbnail_image }}
          />
        </View>
        <View style={styles.headerContentStyles}>
          <Text style={styles.headerTextStyle}>{title}</Text>
          <Text>{artist}</Text>
        </View>
      </CardSection>
      <CardSection>
        <Image
        style={styles.imageStyle}
        source={{ uri: image }}
        />
      </CardSection>
    </Card>
  );
};

const styles = {
  headerContentStyles: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  headerTextStyle: {
    fontSize: 18
  },

  thumbnailStyle: {
    height: 50,
    width: 50
  },
  thumbnailContainterStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 300,
    flex: 1,
    width: null
  }
};

export default AlbumDetail;

从“React”导入React；
从“react native”导入{Text，View，Image}；
从“./卡”导入卡；
从“./CardSection”导入CardSection；
//我们在AlbumList组件中设置要传递到此组件的道具
//{这将获取我们的道具“相册”，然后访问标题键的值}
常量AlbumDetail=（{album}）=>{
const{title，艺术家，缩略图图像，图像}=相册；
返回(
{title}
{艺术家}
);
};
常量样式={
headerContentStyles：{
flexDirection:'列'，
为内容辩护：“周围的空间”
},
headerTextStyle：{
尺寸：18
},
缩略图样式：{
身高：50，
宽度：50
},
ThumbnailContainerStyle：{
为内容辩护：“中心”，
对齐项目：“居中”，
边缘左：10，
marginRight:10
},
图像样式：{
身高：300，
弹性：1，
宽度：空
}
};
导出默认的相册详细信息；

---

任何帮助都将不胜感激

我遇到了一个类似的问题，它似乎与ScrollView不知道其子对象的高度有关。尝试在AlbumDetail的渲染方法中设置组件的高度。ScrollView组件的文档提到了这一点，但有点让人困惑……特别是关于flex:1的部分

---

我的问题是，我正在动态加载ScrollView子对象，因此我不知道如何告诉scroll view它有X子对象，因此如果有人摔倒，它的高度是Y

。 确保ScrollView容器的高度与@SomethingOn提到的高度相同。此外，我在ios上解决了这个问题，在每个项目周围使用了

touchableewithoutfeedback

。只需给每个人一个键，然后让On Press为空

这就是我最后的感受：

setScrollHeight=（width，height）=>this.setState（{scrollHeight:height}）；
//在这里做你喜欢的事

如果您使用的是触控板，并试图用两个手指滚动，请尝试通过按下一个手指并用另一个手指拖动来滚动。

使用

触控无反馈包装儿童

为我完成了这一技巧，谢谢！：）