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容器確實具有@SomethingOn所述的高度。 此外，我通過使用TouchableWithoutFeedback解決每個項目的問題。 只需給每個人一把鑰匙，然后將onPress留空。

最后這對我來說是這樣的：

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

我遇到了類似的問題，似乎與ScrollView有關，不知道它的兒童身高。 嘗試在AlbumDetail的渲染方法中設置組件的高度。 ScrollView組件的文檔引用了這一點，但它有點令人困惑......尤其是關於flex的部分：1。

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

我的問題是我正在動態加載ScrollView子項，因此我不知道如何告訴滾動視圖它有X個子項，因此它的高度為Y.

Answer 3

如果您使用觸控板並嘗試用兩根手指滾動，請嘗試按一根手指滾動並用另一根手指拖動。