Android Expo（React Native）在web浏览器中工作正常，但不适用于设备/仿真器

我正在使用Android Emulator和Expo制作一个hangman应用程序。 我试图体现的是，当用户点击错误的字母时，人体的一部分会显示给用户。但奇怪的是，它只有在网络浏览器中运行时才起作用，而不是在Android模拟器/设备中

当我在web浏览器中键入错误的字母时，它会根据我的意图记录一系列错误的字母。但我不知道它是否也在Android emulator中工作，因为它似乎不工作。我认为这与错误->失败的道具类型有关：提供给

ForwardRef（TextInput）

的

array

类型的无效道具

value

，应为

string

//但不确定，也不知道如何解决这个问题。我花了这么多时间想弄清楚原因，但仍然不清楚。 希望有人能提供一些建议

该计划的世博链接是'exp://192.168.43.201:19000目标是安卓10.0+

我正在附上一些代码

import React, { useState, useEffect } from "react";
import Svg, { Circle, Line } from "react-native-svg";
import { Text, View, StyleSheet, TextInput, Button, Alert } from "react-native";
import Lines from "../constants/Lines";

const GameOnPic = () => {
  const [wrongPressed, setWrongPressed] = useState([]);

  const displayWord = ({ selectedWord, correctLetters, resetHandler }) => {
    const isGuessed = selectedWord
      .split("")
      .every((letter) => correctLetters.includes(letter));
    if (isGuessed) {
      Alert.alert("Congratulations!", "You win!!", [
        { text: "Okay", style: "default", onPress: resetHandler() },
      ]);
    }

return (
  <Text>
    {selectedWord
      .split("")
      .map((letter) => {
        if (letter === " ") {
          return letter;
        } else {
          if (correctLetters.includes(letter)) {
            return letter;
          } else {
            return " __ ";
          }
          // return correctLetters.includes(letter) ? letter : " _ ";
        }
      })
      .join("")}
  </Text>
);
  };

  const DisplayWord = React.memo(displayWord);
  const words = ["app", "program", "interface"];

  const [correctLetters, setCorrectLetters] = useState([]);
  const [selectedWord, setSelectedWord] = useState("");
  const [rightPressed, setRightPressed] = useState([]);

  useEffect(() => {
    setSelectedWord(words[Math.floor(Math.random() * words.length)]);
  }, []);
  const correctLettersHandler = (input) => {
    // console.log(input);
    setCorrectLetters(input.replace(/[^A-Za-z]/gi, ""));
  };

  const onkeyHandler = (e) => {
    const letter = e.nativeEvent.key;
    if (selectedWord.split("").includes(letter)) {
      if (rightPressed.includes(letter)) {
        // showNotif();
        console.log("1");
        console.log(letter);
        console.log(rightPressed);
      } else {
        setRightPressed((rightPressed) => [...rightPressed, letter]);
        console.log("2");
        console.log(letter);
        console.log(rightPressed);
      }
    }

if (!selectedWord.split("").includes(letter)) {
  if (wrongPressed.includes(letter)) {
    // showNotif();
    console.log("3");
    console.log(letter);
    console.log(wrongPressed);
  } else {
    setWrongPressed((wrongPressed) => [...wrongPressed, letter]);
    if (wrongPressed.includes("Backspace")) {
      const index = wrongPressed.indexOf("Backspace");
      if (index > -1) {
        setWrongPressed((wrongPressed) => wrongPressed.splice(index, 1));
      }
    }
    console.log("4");
    console.log(letter);
    console.log(wrongPressed);
    // wrongFunc();
  }
}
  };

  const resetHandler = () => {
    setCorrectLetters([]);
    setSelectedWord("");
    setRightPressed([]);
    setWrongPressed([]);

    setSelectedWord(words[Math.floor(Math.random() * words.length)]);
  };

  return (
    <View style={styles.body}>
      <View>
        <Svg width="350px" height="200px">
          <Line {...Lines} x1="40" y1="20" x2="100" y2="20"></Line>
          <Line {...Lines} x1="100" y1="20" x2="100" y2="40"></Line>
          <Line {...Lines} x1="40" y1="20" x2="40" y2="180"></Line>
          <Line {...Lines} x1="10" y1="180" x2="70" y2="180"></Line>
          <Circle
            // style={{ opacity: wrongPressed.length > 0 ? 1 : 0 }}
            cx="100"
            cy="60"
            r="20"
            stroke="#fff"
            strokeWidth="4"
            fillOpacity="0"
          ></Circle>
          <Line
            {...Lines}
            style={{ opacity: wrongPressed.length > 1 ? 1 : 0 }}
            x1="100"
            y1="80"
            x2="100"
            y2="120"
          ></Line>
          <Line
            {...Lines}
            style={{ opacity: wrongPressed.length > 2 ? 1 : 0 }}
            x1="70"
            x2="100"
            y1="75"
            y2="95"
          ></Line>
          <Line
            {...Lines}
            style={{ opacity: wrongPressed.length > 3 ? 1 : 0 }}
            x1="130"
            x2="100"
            y1="75"
            y2="95"
          ></Line>
          <Line
            {...Lines}
            style={{ opacity: wrongPressed.length > 4 ? 1 : 0 }}
            x1="70"
            x2="100"
            y1="140"
            y2="120"
          ></Line>
          <Line
            {...Lines}
            style={{ opacity: wrongPressed.length > 5 ? 1 : 0 }}
            x1="130"
            x2="100"
            y1="140"
            y2="120"
          ></Line>
        </Svg>
      </View>
      <View>
        <DisplayWord
          selectedWord={selectedWord}
          correctLetters={correctLetters}
          resetHandler={resetHandler}
        />
        <TextInput
          autoCapitalize="none"
          value={correctLetters}
          // react native는 onChange 대신 onChangeText, 그리고 e.target.value 없음
          onChangeText={correctLettersHandler}
          onKeyUp={onkeyHandler}
        />
        <Button title="Other Word" onPress={resetHandler}></Button>
      </View>
      {/* <WrongLetterScreen wrongPressed={wrongPressed} /> */}
    </View>
  );

};
const styles = StyleSheet.create({
  body: {
    backgroundColor: "#34495e",
    color: "#fff",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
  },
});
export default GameOnPic;

import React，{useState，useffect}来自“React”；
从“react native Svg”导入Svg，{Circle，Line}；
从“react native”导入{Text，View，StyleSheet，TextInput，Button，Alert}；
从“./常量/行”导入行；
常量GameOnPic=（）=>{
const[ErrorPressed，SetErrorPressed]=useState（[]）；
const displayWord=（{selectedWord，correctedletters，resetHandler}）=>{
const isgusted=所选单词
.拆分（“”）
.每个（（字母）=>正确的字母。包括（字母））；
如果（我猜）{
警惕，警惕（“祝贺你！”，“你赢了！！”[
{文本：“好”，样式：“默认”，onPress:resetHandler（）}，
]);
}
返回(
{选定字
.拆分（“”）
.map（（字母）=>{
如果（字母==“”）{
回信；
}否则{
if（更正字母。包括（字母））{
回信；
}否则{
返回“u;”；
}
//返回正确的信函。包括（信函）？信函：“”；
}
})
.join（“”）
);
};
const DisplayWord=React.memo（DisplayWord）；
const words=[“应用程序”、“程序”、“界面”]；
const[correctLetters，setCorrectLetters]=useState（[]）；
const[selectedWord，setSelectedWord]=useState（“”）；
常量[rightPressed，setRightPressed]=useState（[]）；
useffect（（）=>{
setSelectedWord（单词[Math.floor（Math.random（）*words.length）]；
}, []);
常量correctLettersHandler=（输入）=>{
//控制台日志（输入）；
setCorrectLetters（输入。替换（/[^A-Za-z]/gi，”）；
};
const onkeyHandler=（e）=>{
常量字母=e.nativeEvent.key；
if（selectedWord.split（“”）包括（字母））{
如果（按右键，包括（字母））{
//showNotif（）；
控制台日志（“1”）；
控制台日志（信件）；
console.log（右键按下）；
}否则{
setRightPressed（（rightPressed）=>[…rightPressed，字母]；
控制台日志（“2”）；
控制台日志（信件）；
console.log（右键按下）；
}
}
如果（！selectedWord.split（“”）包含（字母））{
如果（按错了。包括（字母））{
//showNotif（）；
控制台日志（“3”）；
控制台日志（信件）；
console.log（错误按下）；
}否则{
设置错误按下（（错误按下）=>[…错误按下，字母]；
如果（按错了。包括（“退格”））{
const index=错误按下。indexOf（“退格”）；
如果（索引>-1）{
SetErrorPressed（（错误按下）=>错误按下。拼接（索引，1））；
}
}
控制台日志（“4”）；
控制台日志（信件）；
console.log（错误按下）；
//错误函数（）；
}
}
};
常量resetHandler=（）=>{
固定字母（[]）；
设置所选单词（“”）；
setRightPressed（[]）；
设置错误按下（[]）；
setSelectedWord（单词[Math.floor（Math.random（）*words.length）]；
};
返回(
0 ? 1 : 0 }}
cx=“100”
cy=“60”
r=“20”
笔划=“#fff”
strokeWidth=“4”
fillOpacity=“0”
>
1 ? 1 : 0 }}
x1=“100”
y1=“80”
x2=“100”
y2=“120”
>
2 ? 1 : 0 }}
x1=“70”
x2=“100”
y1=“75”
y2=“95”
>
3 ? 1 : 0 }}
x1=“130”
x2=“100”
y1=“75”
y2=“95”
>
4 ? 1 : 0 }}
x1=“70”
x2=“100”
y1=“140”
y2=“120”
>
5 ? 1 : 0 }}
x1=“130”
x2=“100”
y1=“140”
y2=“120”
>
{/*  */}
);
};
const styles=StyleSheet.create({
正文：{
背景色：“34495e”，
颜色：“fff”，
flexDirection:“行”，
为内容辩护：“周围的空间”，
对齐项目：“中心”，
},
});
导出默认GameOnPic；