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包裹每个项目来解决ios问题。只需给每个人一把钥匙，然后将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

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

React Native ScrollView在iOS中不起作用

3 个答案: