我正在尝试使用react native制作一个网格,它可以响应多种屏幕大小,但在绘制线条时遇到了麻烦(框的两侧不能有笔划)。这是一个小片段:
<View style={styles.boxContainer}>
<View style={styles.box}>
<Text style={styles.boxText}> X </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> O </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> X </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> X </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> O </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> O </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> X </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> X </Text>
</View>
<View style={styles.box}>
<Text style={styles.boxText}> O </Text>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
alignItems: 'center',
width: DeviceWidth*0.3,
height: DeviceWidth*0.3,
},
boxContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
marginRight: DeviceWidth*0.05,
marginLeft: DeviceWidth*0.05,
},
我试过做一个边界,但它涵盖了整个事情,我不知道如何清除线的一面:(我也试过添加一个背景色到我的容器,并试图添加框之间的空间,但无法找出如何使背景看起来类似的大小。
4条答案
按热度按时间czq61nw11#
这样吧
实验结果:
ddrv8njm2#
尝试将网格拆分为3行和3列(框)。为每个列/行创建样式demo:
kknvjkwl3#
8hhllhi24#