Error exchanging View by ScrollView

0

I'm making a page with a menu of 6 elements, divided 2 per line.

And this is all right the way I want it on most screens, but when testing on a 3.2 'screen emulator it cuts the end buttons, so I modified the% of% global by% with% than by which I researched will make the scroll bar appear when needed.

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

import { Actions } from 'react-native-router-flux';

export default class TipoManifestacao extends Component {
  render() {
    return (
      <ScrollView style={styles.geral}>

        <StatusBar 
          //hidden
          backgroundColor='#005288'
        />
        <View style={styles.containerTitulo}>
          <Text style={styles.titulo}>Escolha o tipo da manifestação</Text>
        </View>

        <View style={styles.containerMenu}>

          <View style={styles.menuGrupo}>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

          </View>

          <View style={styles.menuGrupo}>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

          </View>

          <View style={styles.menuGrupo}>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

          </View>

        </View>

      </ScrollView>

    );
  }
}

const styles = StyleSheet.create({
  geral: {
    flex: 1,
    //justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#005288',
  },
  containerTitulo:{
    position: 'absolute',
  },
  titulo: {
    top: 10,
    fontSize: 22,
    fontWeight: 'bold',
    color: '#000',
    //justifyContent: 'flex-start',
  },
  containerMenu: {
    top: 60,
  },
  botao: {
    fontSize: 20, 
    color: '#000',
  },
  containerBotao: {
    marginBottom: 20,
    marginLeft: 10,
    marginRight: 10,
    height:130,
    width:130,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFB504',
    elevation: 10,
  },
  menuGrupo: {
    flexDirection: 'row',
  },
});

However, when I reloaded the emulator, I presented this error that I do not understand:

    
asked by anonymous 26.09.2017 / 20:56

1 answer

0

Well, I managed to make the error disappear, even though Scroll does not work.

Instead of:

<ScrollView style={styles.geral}>

I put:

<ScrollView contentContainerStyle={styles.geral}>

    
26.09.2017 / 21:35