reagieren nativen Flexbox Split-Screen

ich versuche, den Bildschirm mit Flexbox zu spalten, aber ich bin nicht das Ergebnis bekommen wünsche ich, hier ist das, was ichreagieren nativen Flexbox Split-Screen

<View style={{flex: 1}}> 
    <View style={{flex: 1}}>{/* half of the screen */}</View> 

    <View style={{flex: 1}}>{/* the other half */} 
     {/*<Swiper>*/} 
      <View style={{flex: 1}}>{/* a quarter of the other half */}</View> 
      <View style={{flex: 1}}>{/* a quarter of the other half */}</View> 
      <View style={{flex: 1}}>{/* a quarter of the other half */}</View> 
      <View style={{flex: 1}}>{/* a quarter of the other half */}</View> 
     {/*</Swiper>*/} 
    </View> 
</View>

das Problem, dass ich habe, ist, dass der andere Hälfte des Bildschirms erweitert die Größe des Vollbild zu nehmen, ist es nur auf die erste Hälfte beigefügten ohne Berücksichtigung, die durch die Hälfte begrenzt ist, es in

screenshot

existieren, wie soll ich diesen Ansatz?

Quelle

2016-04-19 user5470921

Uhm, also weiß ich irgendwie, was ich in React Native jetzt mache, nach über einem Jahr des Lernens.

<View style={{ flex: 1 }}> 
    <View style={{ backgroundColor: 'gray', flex: 1 }} /> 

    <View style={{ flex: 1 }}> 
    <Swiper> 
     <View 
     style={{ 
      alignItems: 'center', 
      backgroundColor: 'red', 
      justifyContent: 'center', 
      height: Dimensions.get('window').height/2 
     }}> 
     <Text style={{ color: 'white' }}>Test</Text> 
     </View> 
     <View 
     style={{ 
      alignItems: 'center', 
      backgroundColor: 'green', 
      justifyContent: 'center', 
      height: Dimensions.get('window').height/2 
     }}> 
     <Text style={{ color: 'white' }}>Test</Text> 
     </View> 
     <View 
     style={{ 
      alignItems: 'center', 
      backgroundColor: 'blue', 
      justifyContent: 'center', 
      height: Dimensions.get('window').height/2 
     }}> 
     <Text style={{ color: 'white' }}>Test</Text> 
     </View> 
    </Swiper> 
    </View> 
</View>

Quelle

2017-07-04 15:51:29 user5470921

Versuchen Sie, flexDirection: 'row' Stil auf die äußerste Ansicht geben.

Quelle

2016-04-19 19:44:09

dies nur die Orientierung ändert, die nicht das, was ich für, Bekanntmachung im Screenshot Suche i geschrieben, ich einen Text zu einem der Viertel versetzt und in den Mittelpunkt stellen, wurde es getrimmt, aus irgendeinem Grund Es folgt den übergeordneten Beschränkungen des Elterns anstelle des Elternteils iteslf – user5470921

Wenn Sie einen Beispielcode auf rnplay.org setzen, werde ich es überprüfen. –

Ich benutze eine Reactive-native-Swiper-Wrapper für die vier Quads, kann es nicht auf rnplay – user5470921

Hier ist meine Lösung: https://rnplay.org/apps/DQ2gxA

Die Grundidee ist, dass Sie die Anzahl der Spalten (8 in diesem Fall) haben als eine Konstante und dann aufspalten Sie den verfügbaren Platz mit Ihren Bedürfnissen. Und verwenden Sie flexDirection: 'row' mit den übergeordneten Containern.

Quelle

2016-04-19 20:07:42 zvona

Ich versuchte Ihre Methode, es funktioniert nicht für meinen Code aus irgendeinem Grund, verwende ich eine react-native-swiper Wrapper für die vier Quads, im Wesentlichen, drei Quads sind immer versteckt und nur eines wird angezeigt, wirkt sich das auf irgendetwas aus? es sollte nicht! Schauen Sie sich die Platzierung des Textes in einem der Quads an, es ist nicht in der Mitte, obwohl es richtig gebogen ist http://i.imgur.com/IAU9tdL.png – user5470921

reagieren nativen Flexbox Split-Screen

Antwort

Verwandte Themen