Programim dhe zhvillim, javascript, python, php, html

Si të përafroni pamjet e fëmijëve në të majtë me hapësirë ​​të barabartë në React-Native?

Po përpiqem të krijoj një menu për aplikacionin tim në React-Native e cila duhet të ketë shumë ikona në mënyrën e mëposhtme fut përshkrimin e imazhit këtu

Ikonat duhet të jenë në të njëjtin rresht dhe të mbështjella në mënyrë që nëse ekrani është më i madh, më shumë ikona do të jenë në të njëjtin rresht.

Kodi im aktual është si më poshtë

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
        <View style={styles.box}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'aqua',
    margin: 10,
  }
});

Prodhimi aktual është si më poshtë

fut përshkrimin e imazhit këtu

Numri i fëmijëve mund të ndryshojë në të ardhmen, por unë duhet të kem hapësirë ​​në anët, duke përdorur flex-start do të japë rezultatin e mëposhtëm që është i gabuar. Unë dua të kem hapësirë ​​edhe në të dyja anët.

fut përshkrimin e imazhit këtu

Si mund ta rreshtoj në të majtë dhe t'i ketë artikujt me hapësirë ​​të barabartë përreth si imazhi i mësipërm?

react-native javascript
07.03.2019

  • alignItems: 'center' do të përqendronte blloqet. Ndryshojeni në alignItems: 'left' dhe duhet të rreshtohet në të majtë 07.03.2019
  • react-native dhe e majta e tij nuk mbështetet :) 07.03.2019
  • E drejta. Ndrysho justifyContent: 'space-evenly' në justifyContent: 'flex-start' stackoverflow.com/questions/36008969/ 07.03.2019
  • Dublikat i mundshëm i Si të justifikohet (majtas, djathtas, në qendër) secili fëmijë në mënyrë të pavarur? 07.03.2019
  • @AniketG flext-start po përpiqem të përdor të njëjtin rresht kështu që flex start do të ketë më shumë hapësirë ​​në të djathtë që është problemi, pasi ky është i njëjti rresht nuk është dublikatë 07.03.2019

Përgjigjet:


1

për Kutinë përdorni Dimensionet, Bazuar në gjerësinë e ekranit ndani gjerësinë e kutisë

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
   },
  box: {
    width: (Dimensions.get('window').width / 3) - 20, /* minus some value for adjust the gap between boxes */
    height: 100,
    backgroundColor: 'aqua',
    margin: 10,
  }
});
07.03.2019
  • Cila është logjika pas 3.2? 07.03.2019
  • rreshti paraprak nëse keni nevojë për 3 gjerësi kuti / 3 por do të ndahet në mënyrë të barabartë bazuar në madhësinë e ekranit. ju duhet një hapësirë ​​midis çdo kutie, kështu që unë e ndava me 3.2 07.03.2019
  • 3 mund të ndryshojë në bazë të madhësisë së ekranit, po provoj një mënyrë për ta llogaritur atë 07.03.2019
  • ju mund ta bëni këtë gjithashtu ==› gjerësia: (Dimensions.get('window').width / 3) - 20 // minus 20 është për një vlerë për të rregulluar hendekun midis kutive, shtova kodin e StyleSheet. mund te kontrolloni a funksionon kjo? 07.03.2019
  • Unë mora një qasje të ndryshme dhe e zgjidha problemin, faleminderit për sugjerimin tuaj. 07.03.2019

    • 2

    Një opsion është të shtoni kuti shtesë 'të rreme' të cilat do të mbushin hapësirën e disponueshme në rreshtin e fundit:

    <View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={styles.box}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>
<View style={[styles.box, styles.boxFake]}></View>

// reset all styles like backgroundColor, border, etc.
const styles = StyleSheet.create({
  boxFake: {
    backgroundColor: 'transparent'
  }
});

    Ju lehtë mund të llogarisni numrin e kutive të nevojshme 'të rreme' me formulën:

    FakeBoxes = boxesPerRow - totalBoxes % boxesPerRow

    07.03.2019

    3

    Unë mora një qasje të ndryshme duke përdorur një pamje tjetër si një mbështjellës dhe duke bërë llogaritjen e gjerësisë së saj, kjo është më e lehtë për të vendosur gjerësinë e kolonës. Problemi i vetëm është se ne duhet të dimë gjerësinë e artikullit, nuk do të jetë problem në rastin tim. Kodi do të jetë si më poshtë.

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

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      width: 110
    };
  }

  render() {
    //width of child is 110
    const width = `${100 / parseInt(this.state.width / 110)}%`;
    return (
      <ScrollView>
        <View style={styles.container} onLayout={this.onLayout.bind(this)}>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
          <View style={[styles.wrapper, { width: width }]}>
            <View style={styles.box}></View>
          </View>
        </View>
      </ScrollView>
    );
  }

  onLayout(e) {
    if (this.state.width !== e.nativeEvent.layout.width) {
      this.setState({
        width: e.nativeEvent.layout.width
      })
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 40
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
  wrapper: {
    marginVertical: 10, alignItems: 'center'
  }
});
    07.03.2019
    Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..