React Native ScrollView在iOS中不工作
问题描述:
我正在通过React-Native上的教程进行工作。当我尝试在我的应用程序内部实例化ScrollView时,它不起作用。没有错误,没有红色的屏幕,它不会滚动过去五个元素中的第二个。React Native ScrollView在iOS中不工作
这里是代码为我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;
任何帮助将不胜感激。
答
我遇到了类似的问题,它似乎与ScrollView不知道它的高度是儿童有关。尝试在AlbumDetail的渲染方法中设置组件的高度。 ScrollView组件的文档引用了这个,但它有点令人困惑......特别是关于flex的部分:1。
http://facebook.github.io/react-native/releases/0.33/docs/scrollview.html
我的问题是,我动态加载滚动型的孩子,所以我不知道如何告诉滚动视图,它有X孩子,因此它的高度ÿ。
答
如果有人摔倒了这个。 确保ScrollView容器具有@SomethingOn提到的高度。此外,我通过使用围绕每个项目的TouchableWithoutFeedback
解决它的ios。只要给每个人一个钥匙,然后按空就可以了。
这是对我来说在最后:
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>
结束语带着孩子'TouchableWithoutFeedback'的伎俩我,谢谢! :) – epegzz