[英]react-native scrollview doesn't scroll
I can't seem to figure out why a screen in my Android app doesn't scroll at all in the Android emulator.我似乎无法弄清楚为什么我的 Android 应用程序中的屏幕在 Android 模拟器中根本不滚动。 Here's my code:这是我的代码:
import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
Text,
ScrollView,
View,
TouchableHighlight,
StyleSheet
} from 'react-native';
const win = Dimensions.get('window');
class DeficiencyItem extends Component {
render() {
const touchable = {
width:win.width/2-20,
height:230,
backgroundColor:'red',
};
return (
<TouchableHighlight style={touchable}>
<View>
<Text>Item Here</Text>
</View>
</TouchableHighlight>
);
}
}
export default class Items extends Component {
static navigationOptions = {title:'hey'};
constructor(props)
{
super(props);
}
render() {
let deficiencies = [];
for(let x = 0; x<12;x++)
{
let row = <DeficiencyItem key={x} />;
deficiencies.push(row);
}
return (
<View style={{flex:1}}>
<ScrollView style={{
margin:5,
flexWrap: 'wrap',
flexDirection:'row',
}}>
{deficiencies}
</ScrollView>
</View>
);
}
}
There are items exceeding the bottom limit of the view port.有超出视口下限的项目。 But touch drag to scroll in the emulator does nothing.但是在模拟器中触摸拖动滚动没有任何作用。 What did I do wrong?我做错了什么?
if there is no view outside scrollview than remove View element and add flex:1 to scrollview.如果滚动视图之外没有视图,则删除 View 元素并将 flex:1 添加到滚动视图。
Scrollview should be parent view,滚动视图应该是父视图,
<ScrollView style={styles.container}>
<View style={{flex:1}}>
{deficiencies}
</View>
</ScrollView>
container: {
flex: 1,
}
My ScrollView is nested in two other views.我的 ScrollView 嵌套在另外两个视图中。 The issue was solved by providing a height to the scrollview.通过为滚动视图提供高度解决了该问题。 It's not necessary on iOS so, after adding Platform and Dimensions to react native imports, I do this:在 iOS 上没有必要,所以在添加 Platform 和 Dimensions 以响应本机导入后,我这样做:
const { height } = Dimensions.get("screen");
const styles = StyleSheet.create({
scrollView: {
// my outer views have flex:1 so no flex needed here
alignItems: "center",
justifyContent: "center", // or whatever you want
width: "100%,
height: Platform.OS === "android" ? height * 1.3 : height,
// if it was just "height", there would be no extra space to scroll on android
},
// lots of other styles and stuff
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.