Question

我想做一下这个CSS样式在反应原生

中所表达的完全相同的东西

那么如何将此CSS转换为React -native

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我想制作一个如下所示的模态：

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

我需要定义BrandsGrid和ModelsList，并做一些与React-native中的CSS样式完全相似的东西

因此，示例代码对于理解我已经引用文档更有帮助，但无法从中得到很多帮助

Answer 1

在名为style.js的外部css js文件中，你必须编码：

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

并将纯CSS转换为React内联样式特定的JSON表示，这里是您的类.list的示例:(只是知识不添加此代码）

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

所以你的模态：

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

并且不要忘记链接您的外部ccs文件:(在您的主要js文件中存在模式...）

import styles from './style';

如何将Css转换为React-native

1 个答案: