Scroll-View React-Native不起作用

Question

父组件

const App = () => (
    <View style={{ flex: 1 }}>
      <Header headerText={'Albums'} />
      <AlbumList />
    </View>
);

滚动视图

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';

class AlbumList extends Component {
  state={ albums: [] };
  componentWillMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
    .then(response => this.setState({ albums: response.data }));
   }

   renderAlbums() {
     return this.state.albums.map(album =>
        <AlbumDetail key={album.title} album={album} />);
   }

 render() {
   console.log(this.state);
      return (
        <ScrollView >
          {this.renderAlbums()}
        </ScrollView>
      );
    }
 }

export default AlbumList;

我正在尝试让ScrollView正常工作。这些是片段。但是当我运行模拟器时，滚动视图仍无效，并且没有提供项目的完整列表。

Answer 1

你可以分享更多代码，this.renderAlbums（）是什么？ 也用于显示相同元素的列表视图是更好的模式。

https://facebook.github.io/react-native/docs/listview.html

Answer 2

试试这个，基本上改变渲染方法返回

 import React, { Component } from 'react';
    import { ScrollView } from 'react-native';
    import axios from 'axios';
    import AlbumDetail from './AlbumDetail';

    class AlbumList extends Component {
      this.state={ albums: [] };
      componentDidMount() {
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(response => this.setState({ albums: response.data }));
       }

       renderAlbums() {
         return this.state.albums.map(album =>
            <AlbumDetail key={album.title} album={album} />);
       }

     render() {
       console.log(this.state);
          return (
            <div>
               <ScrollView></ScrollView>
               {this.renderAlbums()}
            </div>
          );
        }
     }

    export default AlbumList;