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

Моя проблема заключается в том, что я динамически загружается Scrollview детей, и поэтому я не знаю, как сказать, мнение прокрутки, что она имеет X детей и, следовательно, это высота Y.

Answer 2

Если кто-то падает на это. Убедитесь, что контейнер ScrollView имеет высоту, указанную @SomethingOn. Кроме того, я разрешил его для ios, используя TouchableWithoutFeedback, обернутый вокруг каждого элемента. Просто дайте каждому ключ и оставьте на. Пусто.

Это было для меня в конце:

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>