如何将 React 表单转换为 React Native

Question

虽然在 ReactJS 中做了一些事情，但我对 React Native 还是很陌生。

有什么方法可以将下面的代码转换为完全 React Native 代码吗？目前它可以在网络浏览器上运行，但由于按钮、输入和表单标签，iphone 的 Expo GO 应用程序存在问题。

function PostMessage() {
  let input;
  const [postMessage, { data }] = useMutation(POST_MESSAGE);

return (
    <View
      style={{
        width: "100%",
        alignItems: "center",
        marginTop: "1em",
      }}
    >
      <form
        onSubmit={(e) => {
          e.preventDefault();
          postMessage({ variables: { messageBody: input.value } });
          input.value = "";
        }}
        style={{ alignItems: "center" }}
      >
        <input
          ref={(node) => {
            input = node;
          }}
          style={{ width: 500, height: 30 }}
        />
        <button type="submit" style={{ height: 36 }}>
          <Text>Send</Text>
        </button>
      </form>
    </View>
  );
}

Answer 1

不幸的是，React 无法完全转换为 React Native，因为您的 React 代码正在使用 DOM React Native 中不存在的元素。如果你想转录你的代码以响应原生，它看起来像这样：

... ...

return (
 <View style={{...}}>
    <TextInput onChangeText={...} />
    <Button Title="Send" onPress={...}>
</View>
)

我改变了什么

我删除了组件表单
不幸的是，React Native 不支持 Form 组件（但如果你愿意，你可以使用像 tcomb-form-native 这样的库），所以我删除了它以备份你的代码并且运行.
将 DOM 中仅存在的 Input 组件替换为 TextInput React Native 没有 Input，但是 TextInput 你只是语法错误。
我给按钮添加了标题属性如果要在按钮内放置文本，则无需为此添加组件，只需使用文本属性

补充评论

为了能够兑换 TextInput 中存在的值，您必须使用一些 Hook（与您在 ReactJs 中使用的相同，有关更多信息，请阅读 ReactNative / ReactJs 文档），从而以任何方式使用数据你要。

希望对您有所帮助！

如何将 React 表单转换为 React Native

how to convert react form into React Native

javascript

react-native

expo

graphql-js