React Native 如何通过在屏幕上按下并拖动手指并抓取所选字母来进行选择

t3psigkw  于 2022-12-19  发布在  React
关注(0)|答案(1)|浏览(178)

我正在用react native做一个单词搜索游戏,我在将矩阵信息保存到某个状态时遇到了麻烦,
我尝试过手势处理,但我只能获得位置,但当我在屏幕上拖动手指时无法触发事件。有人能给予我一个提示吗

<GestureHandlerRootView>
      <Animated.View style={{ paddingTop: 18 }}>
        {result.structure.content.map((grid, index) => (
          <S.Line key={index}>
            {grid.map(row => {
              const columnWidth = S.gridColumnWidth(grid.length);
              return (
                <Animated.View
                  key={row.id}
                  style={[
                    ...styleGridSelect(row),
                    {
                      width: columnWidth,
                      height: columnWidth,
                    },
                  ]}
                >
                  <PanGestureHandler
                    onGestureEvent={() => onClickSelect(row)}
                  >
                    <Animated.Text
                      style={[
                        S.gridStyles.text,
                        {
                          textAlign: 'center',
                          fontSize:
                            columnWidth /
                            Platform.select({ ios: 1.3, android: 1.5 }),
                        },
                      ]}
                    >
                      {row.letter}
                    </Animated.Text>
                  </PanGestureHandler>
                </Animated.View>
              );
            })}
          </S.Line>
        ))}
      </Animated.View>
    </GestureHandlerRootView>

我使用的json模板与此类似:

structure: {
  limit_tips: 6,
  nome: 'Fadas existem?',
  description:
    'Seres da Mitologia CELTA, fadas são CRIATURAS encantadas que foram popularizadas nos CONTOS infantis. A expressão FADA; vem do latim, fatum, que quer dizer DESTINO. Na literatura há fadas famosas, como a Sininho de PETER Pan; a Morgana, protetora do Rei Arthur; e Viviane, amante do MAGO Merlin.',
  content: [
    [
      { id: 1, column: 0, letter: 'S', line: 0 },
      { id: 2, column: 1, letter: 'A', line: 0 },
      { id: 3, column: 2, letter: 'R', line: 0 },
      { id: 4, column: 3, letter: 'U', line: 0 },
      { id: 5, column: 4, letter: 'T', line: 0 },
      { id: 6, column: 5, letter: 'A', line: 0 },
      { id: 7, column: 6, letter: 'I', line: 0 },
      { id: 8, column: 7, letter: 'R', line: 0 },
      { id: 9, column: 8, letter: 'C', line: 0 },
    ],
    [
      { id: 10, column: 0, letter: 'P', line: 1 },
      { id: 11, column: 1, letter: 'F', line: 1 },
      { id: 12, column: 2, letter: 'I', line: 1 },
      { id: 13, column: 3, letter: 'M', line: 1 },
      { id: 14, column: 4, letter: 'A', line: 1 },
      { id: 15, column: 5, letter: 'G', line: 1 },
      { id: 16, column: 6, letter: 'O', line: 1 },
      { id: 17, column: 7, letter: 'Y', line: 1 },
      { id: 18, column: 8, letter: 'N', line: 1 },
    ],
    [
      { id: 19, column: 0, letter: 'T', line: 2 },
      { id: 20, column: 1, letter: 'E', line: 2 },
      { id: 21, column: 2, letter: 'E', line: 2 },
      { id: 22, column: 3, letter: 'C', line: 2 },
      { id: 23, column: 4, letter: 'A', line: 2 },
      { id: 24, column: 5, letter: 'U', line: 2 },
      { id: 25, column: 6, letter: 'E', line: 2 },
      { id: 26, column: 7, letter: 'D', line: 2 },
      { id: 27, column: 8, letter: 'O', line: 2 },
    ],
    [
      { id: 28, column: 0, letter: 'R', line: 3 },
      { id: 29, column: 1, letter: 'N', line: 3 },
      { id: 30, column: 2, letter: 'T', line: 3 },
      { id: 31, column: 3, letter: 'H', line: 3 },
      { id: 32, column: 4, letter: 'O', line: 3 },
      { id: 33, column: 5, letter: 'S', line: 3 },
      { id: 34, column: 6, letter: 'G', line: 3 },
      { id: 35, column: 7, letter: 'N', line: 3 },
      { id: 36, column: 8, letter: 'N', line: 3 },
    ],
    [
      { id: 37, column: 0, letter: 'E', line: 4 },
      { id: 38, column: 1, letter: 'T', line: 4 },
      { id: 39, column: 2, letter: 'U', line: 4 },
      { id: 40, column: 3, letter: 'E', line: 4 },
      { id: 41, column: 4, letter: 'A', line: 4 },
      { id: 42, column: 5, letter: 'N', line: 4 },
      { id: 43, column: 6, letter: 'I', line: 4 },
      { id: 44, column: 7, letter: 'G', line: 4 },
      { id: 45, column: 8, letter: 'A', line: 4 },
    ],
    [
      { id: 46, column: 0, letter: 'G', line: 5 },
      { id: 47, column: 1, letter: 'F', line: 5 },
      { id: 48, column: 2, letter: 'G', line: 5 },
      { id: 49, column: 3, letter: 'T', line: 5 },
      { id: 50, column: 4, letter: 'R', line: 5 },
      { id: 51, column: 5, letter: 'T', line: 5 },
      { id: 52, column: 6, letter: 'T', line: 5 },
      { id: 53, column: 7, letter: 'D', line: 5 },
      { id: 54, column: 8, letter: 'I', line: 5 },
    ],
    [
      { id: 55, column: 0, letter: 'E', line: 6 },
      { id: 56, column: 1, letter: 'E', line: 6 },
      { id: 57, column: 2, letter: 'L', line: 6 },
      { id: 58, column: 3, letter: 'M', line: 6 },
      { id: 59, column: 4, letter: 'S', line: 6 },
      { id: 60, column: 5, letter: 'T', line: 6 },
      { id: 61, column: 6, letter: 'A', line: 6 },
      { id: 62, column: 7, letter: 'O', line: 6 },
      { id: 63, column: 8, letter: 'O', line: 6 },
    ],
    [
      { id: 64, column: 0, letter: 'S', line: 7 },
      { id: 65, column: 1, letter: 'E', line: 7 },
      { id: 66, column: 2, letter: 'R', line: 7 },
      { id: 67, column: 3, letter: 'E', line: 7 },
      { id: 68, column: 4, letter: 'O', line: 7 },
      { id: 69, column: 5, letter: 'F', line: 7 },
      { id: 70, column: 6, letter: 'I', line: 7 },
      { id: 71, column: 7, letter: 'A', line: 7 },
      { id: 72, column: 8, letter: 'S', line: 7 },
    ],
    [
      { id: 73, column: 0, letter: 'C', line: 8 },
      { id: 74, column: 1, letter: 'R', line: 8 },
      { id: 75, column: 2, letter: 'D', line: 8 },
      { id: 76, column: 3, letter: 'O', line: 8 },
      { id: 77, column: 4, letter: 'F', line: 8 },
      { id: 78, column: 5, letter: 'A', line: 8 },
      { id: 79, column: 6, letter: 'A', line: 8 },
      { id: 80, column: 7, letter: 'T', line: 8 },
      { id: 81, column: 8, letter: 'N', line: 8 },
    ],
  ],
  suggestions: [
    'CELTA',
    'CONTOS',
    'CRIATURAS',
    'DESTINO',
    'FADA',
    'MAGO',
    'PETER',
  ],
},

image

相关问题