我想在本地创建网格中心菜单,我只是阅读the doc并且看起来很不错,但我在为每个网格菜单创建行时遇到问题
我创建了3x3网格flexbox并使用Copy-Paste代码:
<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
任何人都可以帮我如何创建上面的菜单?
答案 0 :(得分:2)
我将最后一种颜色更改为更明显,并将该行设置为“灰色”(您可以使用lightgrey或任何您想要的自定义颜色),以便您可以轻松更改它。
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>