如何创建3×3格菜单中没有反应第三方的lib本土？

Question

我想创建网格中心菜单反应过来人，我刚刚看了the doc，看起来很好，但是我必须为每个网格菜单创建线路有问题

我创建了3×3格Flexbox的与代码复制并粘贴：

<View style={{
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View>
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'powderblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'skyblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'steelblue'}} />
        </View>
        <View>
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'powderblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'skyblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'steelblue'}} />
        </View>
        <View>
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'powderblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'skyblue'}} />
          <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:10, marginLeft:10, backgroundColor: 'steelblue'}} />
        </View>
      </View>

其结果是这样的：

但我需要添加每个菜单一条线，我的目标是创建一个菜单网格状：

我已经做了收集图标每个菜单，并会与我Icon + Text被替换视图

任何人都可以帮助我如何像上面创建菜单？

Answer 1

我改变最后的颜色更明显和之线做成“灰色”（你可以用浅灰或任何你想要的自定义颜色），这样就可以很容易地改变它。

import {Dimensions, View} from 'react-native'    
const DeviceWidth = Dimensions.get('window').width

下面是渲染函数里面的代码：

  <View style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }}>
    <View style={{
      flexDirection: 'row',
      backgroundColor: "grey"}}>
      <View>
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, backgroundColor: 'powderblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, backgroundColor: 'skyblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, backgroundColor: 'yellow'}} />
      </View>
      <View>
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'powderblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'skyblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginLeft:1, backgroundColor: 'yellow'}} />
      </View>
      <View>
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'powderblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginBottom:1, marginLeft:1, backgroundColor: 'skyblue'}} />
        <View style={{width: DeviceWidth*0.2, height: DeviceWidth*0.2, marginLeft:1, backgroundColor: 'yellow'}} />
      </View>    
    </View>
  </View>