React Native ScrollView is not working in iOS

Question

I am working through a tutorial on React-Native. When I tried to instantiate a ScrollView inside of my app it doesn't work. There are no errors, no red screen, it simply won't scroll past the second of five elements.

Here is the code for my 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);

Here is the code for the component 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>
      );
    }
  }

And finally, here is the code for the AlbumDetail component.

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;

Any help would be greatly appreciated.

Answer 1

If anyone is falling over this. Make sure that the ScrollView Container does have a height as mentioned by @SomethingOn . Furthermore I resolved it for ios by using TouchableWithoutFeedback wrapped around each item. Just give each one a key and leave onPress empty.

This was it for me at the end:

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>

Answer 2

I'm running into a similar problem and it seems related to the ScrollView not knowing the height of it's Children. Try setting a height on the component in the AlbumDetail's render method. The documentation for the ScrollView component makes reference to this, but it's a little confusing...especially the part about flex :1.

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

My problem is that I'm dynamically loading ScrollView children and therefore I don't know how to tell the scroll view that it has X children and therefore it's height is Y .

Answer 3

如果您使用触控板并尝试用两根手指滚动，请尝试按一根手指滚动并用另一根手指拖动。