Bu Görüntüle bileşenleri Yerli Tepki arasında Boşluğu azaltabilir nasıl

oy
0

Yani sadece tepki yerli bir bilgi yarışması app inşa .... öğreniyorum ve sanırım düğmelerin birinci satır ve, bunu nasıl azaltabilir çok fazla olduğu düğmelerinin ikinci sıradaki arasındaki boşluk? Teşekkürler

<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',
  }
});

İşte

Oluştur 27/11/2018 saat 18:10
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Küçük, İhtiyacınız olmayan flex: 3hiçbir kardeşleriyle bir elemanı için, gerçekten önemli olmamalı ama sadece atamanız gerekir flex: 1yalnız olduğunu ve kardeşler 'için daha fazla alan göreceli yukarı almamalıdır eğer.

güzel gösterilecek onlara bir sarmalayıcı vermelidir senin düğmeleri almak için:

<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>

nerede styles.buttonWrapperadildir:

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

Şimdi düğmesi grubu ve soru ilerleme çubuğunun yüksekliğini sonra uzayda da eşit miktarda işgal edecek dikkate alınır ve düğme grubu birlikte sayesinde ezilmiş olacak justifyContent: 'space-around'

Bu sizin gibi bir şey için düğmeye stilleri değişmelidir çalışmak için çok Ancak bu düğmelerin boyutunu değiştirir:

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

: Burada eylem görebilirsiniz https://snack.expo.io/HkWF-EsA7

Eğer yeni başlıyorsanız Flex biraz garip olabilir, bu yüzden bir çok denemeler yapılmasını öneririz. Gibi ilginç özellikler vardır aspectRatio, alignContent, alignSelfve diğerleri (buraya olanlar hakkında daha fazla bilgi) . İlk başta sinir bozucu olabilir ama genişliğini ve yüksekliğini kullanarak önlemek ve tamamen yerine esnek kullanabilirsiniz eğer düzenleri çok daha iyi olacaktır. Bu her zaman mümkün değildir ama sen başarmak çalıştığınız şey için sadece iyi çalışır düşünüyorum.

Bu size, Herhangi bir sorunuz varsa bana bildirin Eğer ilerlemeye yapabileceği şeyler hakkında bir fikir veriyor umut!

Cevap 27/11/2018 saat 21:09
kaynak kullanıcı

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