如何在没有第三方库的情况下在本机中创建3x3网格菜单？ [英] How to create 3x3 grid menu in react native without 3rd party lib?

问题描述

我想在react native中创建网格中心菜单，我只读了

，但我需要为每个菜单添加一行，而我的目标是创建一个菜单网格，如：

我已经完成了每个菜单的图标收集工作，用我的图标+文字

替换视图吗？有人可以帮助我如何创建上述菜单吗？

解决方案

我将最后一种颜色更改为更加可见，并将行设置为灰色（您可以使用浅灰色或所需的任何自定义颜色），以便您可以轻松更改它。

  import'Dimensions，View} from'react-native'
 const DeviceWidth = Dimensions.get（'window' ）.width 
  

以下是render函数中的代码：

 < View style = {{
 flex：1，
 justifyContent：'center'，
 alignItems：'center'， 
}}> 
<查看样式= {{
 flexDirection：行，
 backgroundColor：灰色}}> 
< View> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginBottom：1，backgroundColor：'powderblue'}} /> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginBottom：1，backgroundColor：'skyblue'}} /> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，backgroundColor：‘yellow’}} /> 
< / View> 
< View> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginBottom：1，marginLeft：1，backgroundColor：'powderblue'}} /> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginBottom：1，marginLeft：1，backgroundColor：'skyblue'}} /> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginLeft：1，backgroundColor：'yellow'}} /> 
< / View> 
< View> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginBottom：1，marginLeft：1，backgroundColor：'powderblue'}} /> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginBottom：1，marginLeft：1，backgroundColor：'skyblue'}} /> 
<查看样式= {{width：DeviceWidth * 0.2，height：DeviceWidth * 0.2，marginLeft：1，backgroundColor：'yellow'}} /> 
< / View> 
< / View> 
< / View> 
  

I want to create grid center menu in react native, I just read the doc and looks good to start, but I have a problem to creating line for each grid menu

I've created 3x3 grid flexbox with Copy-Paste the code :

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

and the result looks like :

but I need to add a line for each menu and my goal is to create a menu grid like :

I have done collecting the icon for each menu, and will be replacing the view with my Icon + Text

Anyone can help me how to create menu like above?

解决方案

I change the last color to be more visible and made the line "grey" (you can use lightgrey or any custom color you want) so that you can change it easily.

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

Here is the code inside the render function:

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

这篇关于如何在没有第三方库的情况下在本机中创建3x3网格菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！