ios - 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

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