como posso reduzir o espaço entre estes Visualização de componentes Reagir Native

votos
0

Portanto, estou apenas aprendendo .... criando um aplicativo Quiz em reagir nativo e eu acho que o espaço entre a primeira linha dos botões e a segunda fileira de botões é muito, como posso reduzi-la? obrigado

<LinearGradient colors={['#0D0B18','#28263E']} style={styles.container}>
    <Text style={styles.question}>After Jesus rose from the dead, how long did he remain on earth before ascending to heaven? </Text>

    <View style={styles.buttonRow}>
      <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
        <Text style={styles.buttonText}>12 days</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
        <Text style={styles.buttonText}>40 days</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.buttonRow}>
      <TouchableOpacity style={styles.buttonStyle}onPress={this.onPress}>
        <Text style={styles.buttonText}>3 months</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
        <Text style={styles.buttonText}>1 year</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.progressStyle}>
      <ProgressViewIOS
        style={styles.progressView}
        progress={(0.2)}
      />
    </View>

  </LinearGradient>


const styles = StyleSheet.create ({
 container: {
   flex: 3,
 },
 question: {
   paddingTop: '20%',
   padding: 30,
   flex: 1,
   color: '#fff',
   fontSize: 25
 },
  buttonRow : {
    marginTop: 0,
    flexDirection: 'row',
    color: '#fff',
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  buttonStyle: {
    backgroundColor: '#fff',
    width: '40%',
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10
  },
  buttonText: {
    color: '#000'
  },
  progressView: { 
    width: '90%',
  },
  progressStyle: {
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

aqui

Publicado 27/11/2018 em 18:10
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Pequeno, você não precisa flex: 3de um elemento sem irmãos, não deve realmente importa, mas você só precisa atribuí-lo flex: 1se ele está sozinho e não deve ocupar mais espaço em relação ao que é irmãos.

Para obter seus botões para exibir bem você deve dar-lhes um invólucro:

<View style={styles.buttonWrapper}>
  <View style={styles.buttonRow}>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>12 days</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>40 days</Text>
    </TouchableOpacity>
  </View>
  <View style={styles.buttonRow}>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>3 months</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
      <Text style={styles.buttonText}>1 year</Text>
    </TouchableOpacity>
  </View>
</View>

onde styles.buttonWrapperé apenas:

buttonWrapper: {
  flex: 1,
  justifyContent: "space-around"
},

Agora, o seu grupo de botões e pergunta vai ocupar uma quantidade ainda de espaço após o auge da sua barra de progresso é levado em conta eo grupo botão será esmagado juntos graças à justifyContent: 'space-around'

Isto altera o tamanho dos botões no entanto, para que isso funcione você deve mudar os estilos de botão para algo como:

buttonStyle: {
  backgroundColor: "#fff",
  flex: 1,
  marginHorizontal: 5,
  aspectRatio: 2,
  justifyContent: "center",
  alignItems: "center",
  borderRadius: 10
},

Você pode ver isso em ação aqui: https://snack.expo.io/HkWF-EsA7

Flex pode ser um pouco estranho quando você está apenas começando, então eu recomendo experimentar muito. Existem propriedades interessantes, como aspectRatio, alignContent, alignSelfe muitos outros (saiba mais sobre os aqui) . Pode ser frustrante no início, mas seus layouts será muito melhor se você pode evitar o uso de largura e altura e inteiramente usar Flex vez. Isso nem sempre é possível, mas eu acho que vai funcionar muito bem para o que você está tentando realizar.

Espero que este lhe deu uma idéia do que você poderia fazer avançar, se você tiver alguma dúvida me avise!

Respondeu 27/11/2018 em 21:09
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more