reactjs 如何制作类似井字游戏的3x3网格

icnyk63a 于 2022-12-03 发布在 React

关注(0)|答案(4)|浏览(155)

我正在尝试使用react native制作一个网格，它可以响应多种屏幕大小，但在绘制线条时遇到了麻烦（框的两侧不能有笔划）。它需要看起来像这样：example grid my current grid显示器
这是一个小片段：

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

我试过做一个边界，但它涵盖了整个事情，我不知道如何清除线的一面：（我也试过添加一个背景色到我的容器，并试图添加框之间的空间，但无法找出如何使背景看起来类似的大小。

reactjs

来源：https://stackoverflow.com/questions/74649783/how-to-make-a-3x3-grid-similar-to-tic-tac-toe-grid

4条答案

按热度按时间

jc3wubiy1#

这样吧

import * as React from 'react';
import {Dimensions, SafeAreaView, StyleSheet, Text, View} from 'react-native';

const DeviceWidth = Dimensions.get('window').width;

export default function App() {
  const [showModal, setShowModal] = React.useState(false);

  const xo = ['X', 'O', 'X', 'O', 'X', 'O', 'O', 'X', 'O'];

  return (
    <SafeAreaView>
      <View style={styles.boxContainer}>
        {xo.map((value, index) => {
          const row = index % 3;
          return (
            <View
              style={[
                styles.box,
                {
                  borderRightColor: row < 2 ? 'black' : 'transparent',
                  borderLeftColor: row >= 1 ? 'black' : 'transparent',
                  borderTopColor: index > 2 ? 'black' : 'transparent',
                  borderBottomColor: index < 6 ? 'black' : 'transparent',
                },
              ]}>
              <Text style={styles.boxText}>{value}</Text>
            </View>
          );
        })}
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  boxText: {
    fontSize: 90,
  },

  box: {
    alignItems: 'center',
    width: DeviceWidth * 0.3,
    height: DeviceWidth * 0.3,
    borderWidth: 1,
    borderColor: 'transparent',
  },

  boxContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    marginRight: DeviceWidth * 0.05,
    marginLeft: DeviceWidth * 0.05,
  },
});

实验结果：

赞(0）回复(0）举报 2022-12-03

pxiryf3j2#

尝试将网格拆分为3行和3列（框）。为每个列/行创建样式demo：

import * as React from 'react';
import { Text, View, StyleSheet, useWindowDimensions } from 'react-native';
import Constants from 'expo-constants';

const Box = ({ char, style }) => {
  const { width, height } = useWindowDimensions();
  const size = Math.min(width, height) / 3;
  return (
    <View
      style={[
        {
          width: size,
          height: size,
          alignItems: 'center',
          justifyContent: 'center',
        },
        style,
      ]}>
      <Text>{char}</Text>
    </View>
  );
};
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.row1}>
        <Box char="1" style={styles.col1} />
        <Box char="2" style={styles.col2} />
        <Box char="3" style={styles.col3} />
      </View>
      <View style={styles.row2}>
        <Box char="4" style={styles.col1} />
        <Box char="5" style={styles.col2} />
        <Box char="6" style={styles.col3} />
      </View>
      <View style={styles.row3}>
        <Box char="7" style={styles.col1} />
        <Box char="8" style={styles.col2} />
        <Box char="9" style={styles.col3} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  row1: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    alignItems: 'center',
  },
  row2: {
    flexDirection: 'row',
    width: '100%',
  },
  row3: {
    flexDirection: 'row',
    width: '100%',
    borderTopWidth: 1,
  },
  col1: {
    borderRightWidth: 1,
  },
  col2: {
    borderRightWidth: 1,
  },
  col3:{
    
  }
});

赞(0）回复(0）举报 2022-12-03

ugmeyewa3#

import { Dimensions, FlatList, Text, View } from 'react-native';
import styled from 'styled-components';

const { width } = Dimensions.get('window');

const BORDER_WIDTH = 4;

const Test = () => {

    const data = ['x', 'o', 'x', 'x', 'o', 'x', 'x', 'o', 'x',];

    return (
        <Container>
            <Content>
                <FlatList
                    data={data}
                    keyExtractor={(_, index) => index.toString()}
                    numColumns={3}
                    renderItem={({ item }) => <Cell>
                        <CellValue>{item}</CellValue>
                    </Cell>}
                    bounces={false}
                />
                <RemoveBorder />
            </Content>
        </Container>
    )
}

export default Test;

const Container = styled(View)`
    flex: 1;
    background-color: white;
    align-items: center;
    justify-content: center;
`

const Content = styled(View)`
    width: ${width}px;
    height: ${width}px;
`

const RemoveBorder = styled(View)`
    position: absolute;
    border-width: ${BORDER_WIDTH / 2}px;
    border-color: white;
    width: 100%;
    height: 100%;
`

const Cell = styled(View)`
    width: ${width / 3}px;
    height: ${width / 3}px;
    align-items: center;
    justify-content: center;
    border-width: ${BORDER_WIDTH / 2}px;
`

const CellValue = styled(Text)`
    font-size: 40px;
    color: black;
`

赞(0）回复(0）举报 2022-12-03

kdfy810k4#

<SafeAreaView style={styles.container}>
      <View style={[styles.boxContainer, {borderBottomWidth: 2}]}>
        <View style={[styles.box, {borderRightWidth: 2}]}>
          <Text style={{}}> X </Text>
        </View>
        <View style={[styles.box, {borderRightWidth: 2}]}>
          <Text style={{}}> O </Text>
        </View>
        <View style={styles.box}>
          <Text style={{}}> X </Text>
        </View>
      </View>
      <View style={[styles.boxContainer, {borderBottomWidth: 2}]}>
        <View style={[styles.box, {borderRightWidth: 2}]}>
          <Text style={{}}> X </Text>
        </View>
        <View style={[styles.box, {borderRightWidth: 2}]}>
          <Text style={{}}> O </Text>
        </View>
        <View style={styles.box}>
          <Text style={{}}> O </Text>
        </View>
      </View>
      <View style={styles.boxContainer}>
        <View style={[styles.box, {borderRightWidth: 2}]}>
          <Text style={{}}> X </Text>
        </View>
        <View style={[styles.box, {borderRightWidth: 2}]}>
          <Text style={{}}> X </Text>
        </View>
        <View style={styles.box}>
          <Text style={{}}> O </Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, alignItems: 'center', justifyContent: 'center',
  },
  boxContainer: {
    flexDirection: 'row', alignItems: 'center',
  },
  box: {
    width: width*0.3, height: width*0.3, alignItems: 'center', justifyContent: 'center',
  }
})

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 如何制作类似井字游戏的3x3网格

4条答案

相关问题

热门标签

最新问答