Wie kann ich konvertieren Css React-native

Question

ich genau das gleiche, was dieses CSS Styling schlägt in reagieren nativen

So tun will, wie kann ich das CSS konvertieren Reagieren -native

.grid { 
 
    display: flex; 
 
    flex-direction: row; 
 
    list-style: none; 
 
    padding-left: 0; 
 
    flex-wrap: wrap; 
 
    margin-top: 0; 
 
    margin-bottom: 20px; 
 
    width: 400px; 
 
} 
 

 
.grid-item { 
 
    flex-grow: 0; 
 
    border-right: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
    height: 100px; 
 
    background: rgba(0,0,0,0.1); 
 
    width: 33%; 
 
} 
 

 
.grid-item:nth-last-child(-n+3) { 
 
    border-bottom: none; 
 
} 
 

 
.grid-item:nth-child(3n+0) { 
 
    border-right: none; 
 
} 
 

 
.list { 
 
    display: flex; 
 
    flex-direction: column; 
 
    list-style: none; 
 
    padding-left: 0; 
 
    width: 400px; 
 
} 
 

 
.list-item { 
 
    flex-grow: 0; 
 
    border-bottom: 1px solid #000; 
 
    height: 60px; 
 
    background: rgba(0,0,0,0.1); 
 
    flex: 1; 
 
} 
 

 
.list-item:last-child { 
 
    border-bottom: none; 
 
}

<ul class="grid"> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
    <li class="grid-item"> 
 

 
    </li> 
 
</ul> 
 

 
<ul class="list"> 
 
    <li class="list-item"> 
 
    
 
    </li> 
 
    <li class="list-item"> 
 
    
 
    </li> 
 
    <li class="list-item"> 
 
    
 
    </li> 
 
    <li class="list-item"> 
 
    
 
    </li> 
 
</ul>

ich möchte ein Modal machen, die wie folgt aussieht:

 <Modal> 
      <BrandsGrid /> 
     </Modal> 
     <Modal> 
      <ModelsList /> 
     </Modal> 

Ich brauche BrandsGrid und ModelsList und etwas tun, genau ähnlich dem CSS-Styling in React-native

So Beispiel-Codes werden mehr hilfreich für das Verständnis zu definieren, habe ich die Dokumentation bezeichnet, aber viel Hilfe nicht aus diesem

bekommen könnte

Answer 1

in Ihrem externen CSS-Datei mit dem Namen js style.js müssen Sie wie es Codierung:

import {StyleSheet} from 'react-native'; 

module.exports = StyleSheet.create({ 
.grid-item { 
    flex-grow: 0; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
    height: 100px; 
    background: rgba(0,0,0,0.1); 
    width: 33%; 
    }, 
.grid-item:nth-last-child(-n+3) { 
    border-bottom: none; 
    }, 
.... 
.... 
}); 

und seine übersetzt schlicht CSS in den Stil Darstellung spezifische JSON in-line Reagieren Sie hier, dass das Beispiel der Klasse ist. Liste: (nur Wissen diesen Code nicht hinzufügen)

{ 
"list": { 
    "display": "flex", 
    "flexDirection": "column", 
    "listStyle": "none", 
    "paddingLeft": "0", 
    "width": "400px" 
    } 
} 

so in Ihrem modal:

<Modal style={styles.grid-item}> 
     <BrandsGrid style={styles.list}/> 
</Modal> 
<Modal> 
     <ModelsList style={styles.list}/> 
</Modal> 

und vergessen Sie nicht, Ihren externen ccs Link-Datei (in der Haupt js-Datei, die vorhanden ist modal ...)

import styles from './style';