React Native ScrollView在iOS中不工作

Question

我正在通过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); 

这里是AlbumList

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> 
    ); 
    } 
    } 

该组件的代码最后，这里是为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; 

任何帮助将不胜感激。

Answer 1

我遇到了类似的问题，它似乎与ScrollView不知道它的高度是儿童有关。尝试在AlbumDetail的渲染方法中设置组件的高度。 ScrollView组件的文档引用了这个，但它有点令人困惑......特别是关于flex的部分：1。

http://facebook.github.io/react-native/releases/0.33/docs/scrollview.html

我的问题是，我动态加载滚动型的孩子，所以我不知道如何告诉滚动视图，它有X孩子，因此它的高度ÿ。

Answer 2

如果有人摔倒了这个。 确保ScrollView容器具有@SomethingOn提到的高度。此外，我通过使用围绕每个项目的TouchableWithoutFeedback解决它的ios。只要给每个人一个钥匙，然后按空就可以了。

这是对我来说在最后：

setScrollHeight = (width, height) => this.setState({scrollHeight: height}); 

<View> 
    <ScrollView 
    onContentSizeChange={this.setScrollHeight} 
    style={{height: this.state.scrollHeight}} 
    > 
    <TouchableWithoutFeedback> 
     // do your fancy stuff here 
    </TouchableWithoutFeedback> 
    </ScrollView> 
</View>