Реагировать родной вид прокрутки Android не работает

Question

У меня есть реагировать нативный компонент, как:

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;

Answer 1

У меня была такая же проблема, и я пробовал все в Интернете, например, решения flex:1... Но проблема в том, что Android не позволяет вам использовать вложенную прокрутку с scrollview. Я просто положил

nestedScrollEnabled={true} 

к моему объекту scrollview, и он работал как шарм.

Answer 2

У меня была аналогичная проблема, но я решил ее следующим образом:

<ScrollView style={{ 

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

    }}>
       ///
    </ScrollView>