反应本机android滚动视图不起作用答案

【问题标题】：react native android scroll view not working反应本机android滚动视图不起作用
【发布时间】：2016-05-26 07:11:47
【问题描述】：

我有一个反应原生组件，例如：

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

import Level from './Level';

class LevelList extends Component {
    render() {

        return (
            <ScrollView style={styles.scrollView} >
                <View style={styles.levelList}>
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                </View>
            </ScrollView>
        )
    }
}

var styles = StyleSheet.create({
    scrollView: {
    backgroundColor: '#fff',
    flex: 1,
    },
    levelList: {
        marginTop: 50,
        flexDirection:'column',
        alignItems: 'center',
    },

})

export default LevelList;

这里的<Level> 只是一个包含文本的组件。

我的容器中有<LevelList>，例如：

class LevelListView extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <Header />
                <LevelList />
            </View>
        )
    }
}

export default LevelListView

在这里，我的列表一侧有一个滚动条，但它没有滚动。我在这里错过了什么？

我正在模拟器中运行应用程序：

更新：

import React, { Component } from 'react';

import { StyleSheet, Text, View } from 'react-native';

class Header extends Component {
    render() {
        return (
            <View style={styles.toolbar}>
                <Text style={styles.toolbarBack}>Back</Text>
                <Text style={styles.toolbarTitle}>Levels</Text>
            </View>
        )
    }
}

var styles = StyleSheet.create({
    toolbar:{
        backgroundColor:'#00bcd4',
        paddingTop:10,
        paddingBottom:10,
        flexDirection:'row'
    },
    toolbarTitle:{
        color:'#fff',
        textAlign:'center',
        fontSize:20,
        fontWeight:'bold',
        marginRight: 30,
        flex:1
    },
    toolbarBack: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        marginTop: 4,
        marginLeft: 10,
    }
})

export default Header;

【问题讨论】：

嘿，分享'Header'组件代码..
@Jickson 我已经添加了 Header 组件
嘿，我试过你的代码。它在这里工作。我猜问题出在其他一些组件中..
@Jickson 我只有 2 个组件，标题和级别列表....你在模拟器上试过了吗？？
是的。我在安卓模拟器上试过..

标签： react-native react-native-scrollview

【解决方案1】：

我遇到了同样的问题，并尝试了互联网上的所有方法，例如 flex:1 解决方案……但问题是，Android 不允许您使用带有滚动视图的嵌套滚动。我只是说：

nestedScrollEnabled={true}

我的滚动视图对象的命令，它就像一个魅力。

【讨论】：

【解决方案2】：

我遇到了类似的问题，但我通过这样做解决了它：

<ScrollView style={{ 

    height:Dimensions.get('screen').height

    }}>
       ///
    </ScrollView>

【讨论】：