React Native - ScrollView中的ScrollView(Android)

时间:2016-09-08 10:58:44

标签: android react-native scrollview

我正在尝试在ScrollView中制作ScrollView。

以下是代码的示例版本:

'use strict';

import React, { Component } from 'react';
import {
    ScrollView,
    Text,
    View,
}
    from 'react-native';

class Example extends Component {

    constructor(props) {
        super(props);

        this.state = {}
    }



    render() {

        return (<View style={{flex: 1, backgroundColor: 'green'}}>
            <ScrollView style={{flex: 1, backgroundColor: 'red', flexDirection: 'column'}}>

                <View style={{backgroundColor: 'orange', height: 700}}>
                    <Text>Area 1</Text>
                </View>

                <ScrollView style={{backgroundColor: 'hotpink', height: 200}}>
                    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus aliquet convallis. Nam ut
                        quam non velit bibendum ultricies id a nulla. Nulla suscipit dolor at mi fermentum semper. Proin
                        in nunc tristique, placerat mi ut, condimentum nunc. Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit. Integer faucibus id lacus luctus pharetra. Donec sed volutpat metus. Morbi leo
                        augue, ornare eget rhoncus ornare, venenatis tincidunt purus. Nam fringilla nulla est, ut
                        ullamcorper diam vulputate vitae. Aliquam vitae diam ornare, pulvinar sem vitae, aliquam libero.
                        Donec vitae dui sem. Nullam massa nulla, dictum a felis sit amet, vehicula varius nisl. Vivamus
                        non eros malesuada lectus lobortis porttitor. Interdum et malesuada fames ac ante ipsum primis
                        in faucibus. Nam nec velit magna. Donec elementum purus posuere, dignissim neque sed,
                        pellentesque lacus.</Text>
                    <Text>Morbi varius libero vel sem venenatis, sed luctus urna sollicitudin. Phasellus non nibh non
                        ipsum bibendum condimentum. Aenean faucibus lectus at accumsan blandit. Sed suscipit lorem a
                        tortor ornare luctus. Quisque molestie risus sed euismod volutpat. Maecenas interdum, elit a
                        laoreet laoreet, tellus dolor gravida neque, id cursus mi metus vel leo. Pellentesque laoreet
                        condimentum neque mollis placerat. Integer auctor, orci non semper viverra, justo risus congue
                        lacus, sit amet ornare quam odio sit amet lorem. Nullam facilisis augue vel egestas eleifend. In
                        hac habitasse platea dictumst. Pellentesque ac magna hendrerit lorem viverra fermentum quis
                        convallis lectus. Mauris vitae facilisis libero.</Text>
                    <Text>Donec at leo sit amet metus ullamcorper laoreet. Cras eget tincidunt ipsum. Nulla facilisi.
                        Quisque pulvinar mollis magna ac malesuada. Sed sodales, felis at facilisis eleifend, mauris
                        elit sagittis risus, eu euismod velit nisi quis neque. Cras id odio feugiat, tristique nisi
                        scelerisque, condimentum nisi. Vivamus aliquam mattis metus, ut bibendum risus ultrices a.
                        Nullam euismod enim ut sodales fermentum. Morbi vel lectus gravida, rhoncus ligula sed, luctus
                        nibh. Donec at erat eget magna finibus aliquet et id sapien. Nam eleifend a urna rhoncus congue.
                        Vestibulum nisi ipsum, commodo id nisl ut, efficitur tempus massa. Cras volutpat elementum
                        lorem, eu lacinia ligula laoreet a.</Text>
                </ScrollView>

                <View style={{backgroundColor: 'darkorange', height: 700}}>
                    <Text>Area 2</Text>
                </View>
            </ScrollView>
        </View>)

    }

}

export default Example;

这适用于iOS,其中父滚动在子滚动处于活动状态时停止响应。然而,在Android上滚动孩子是不被识别的,并且什么都不做。

有没有人有解决方案?

0 个答案:

没有答案