反应原生滚动视图不滚动



我似乎无法弄清楚为什么我的Android应用程序中的屏幕在Android模拟器中根本无法滚动。 这是我的代码:

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>
        );
  }
}

有些项目超出了视口的下限。 但是触摸拖动以在模拟器中滚动没有任何作用。 我做错了什么?

如果滚动视图之外没有视图,则删除视图元素并将 flex:1 添加到滚动视图。

滚动视图应该是父视图,

<ScrollView style={styles.container}>
  <View style={{flex:1}}>
    {deficiencies}
  </View>
</ScrollView>
container: {
    flex: 1,
  }

My ScrollView 嵌套在另外两个视图中。此问题已通过为滚动视图提供高度得到解决。在 iOS 上没有必要,因此,在添加平台和维度以响应本机导入后,我这样做:

 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
 });

相关内容

  • 没有找到相关文章

最新更新