ScrollView 居然不滑动

今天需要几个图,这几个图一页肯定显示不出来,因此使用react-native的ScrollView,但是怎么样也滑动不了,郁闷

后来把contentContainerStyle这个样式去了好了,弄了一下午

import React,{ Component } from 'React';
import {
    View,
    Text,
    Image,
    ScrollView,
    StyleSheet,
    Platform,
} from 'react-native';
import Echarts from 'native-echarts';

let data;
export default class WzDashBoard extends Component{

    constructor(props) {
        super(props);

        this.state = {
            option : {
                title : {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        };
    }

    componentDidMount(){
        // data = this.genData(3);
        // this.refreshOptions();
    }

    refreshOptions(){
        this.setState({
            option : {
                title : {
                    text: '同名数量统计',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: data.legendData,

                    selected: data.selected
                },
                series : [
                    {
                        name: '姓名',
                        type: 'pie',
                        radius : '55%',
                        center: ['40%', '50%'],
                        data: data.seriesData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        });
    }

    render(){
        return(
            <View style={styles.container}>
                <ScrollView
                    showsVerticalScrollIndicator={true}>
                    <Text>
                        this is dashboard
                    </Text>
                    <Echarts option={this.state.option} width={300}  height={100} />
                    <Echarts option={this.state.option} width={300}  height={100} />
                    <Echarts option={this.state.option} width={300}  height={200} />
                    <Echarts option={this.state.option} width={300}  height={200} />
                    <Echarts option={this.state.option} width={300}  height={100} />
                    <Echarts option={this.state.option} width={300}  height={100} />
                    <Echarts option={this.state.option} width={300}  height={100} />
                    <Echarts option={this.state.option} width={300}  height={100} />
                    <View style={{height:Platform.OS == 'ios' ? 0:30,}}></View>//这个可以加,也可以不加
                </ScrollView>
            </View>

        )
    }

    genData(count) {
        let nameList = [
            '赵', '钱', '孙', '危'
        ];
        let legendData = [];
        let seriesData = [];
        let selected = {};
        for (let i = 0; i < 4; i++) {
            name = Math.random() > 0.65
                ? makeWord(4, 1) + '·' + makeWord(3, 0)
                : makeWord(2, 1);
            legendData.push(name);
            seriesData.push({
                name: name,
                value: Math.round(Math.random() * 100000)
            });
            selected[name] = i < 6;
        }

        return {
            legendData: legendData,
            seriesData: seriesData,
            selected: selected
        };

        function makeWord(max, min) {
            let nameLen = Math.ceil(Math.random() * max + min);
            let name = [];
            for (let i = 0; i < nameLen; i++) {
                name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
            }
            return name.join('');
        }
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems: 'center',
        backgroundColor:'#F5FCFF'
    }
});

猜你喜欢

转载自blog.csdn.net/fivestar2009/article/details/83214261
今日推荐