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>