How to create 3x3 grid menu in react native without 3rd party lib?

问题

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?

回答1:

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>

来源：https://stackoverflow.com/questions/49247633/how-to-create-3x3-grid-menu-in-react-native-without-3rd-party-lib

标签

css

react-native

grid-layout