如何将 React 表单转换为 React Native答案

【问题标题】：how to convert react form into React Native如何将 React 表单转换为 React Native
【发布时间】：2021-06-18 12:50:09
【问题描述】：

虽然在 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>
  );
}

【问题讨论】：

React 不能直接转成 React Native，因为它们是两个不同的东西。 react native 不支持 form 和 input 等 DOM 元素。例如，input 变为 TextInput 和 button 变为 Button。

标签： javascript react-native expo graphql-js

【解决方案1】：

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

... ...

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

我改变了什么

我删除了组件表单
不幸的是，React Native 不支持 Form 组件（但如果你愿意，你可以使用 tcomb-form-native 之类的库），所以我删除了它来让你的代码恢复运行。
将仅存在于 DOM 中的 Input 组件替换为 TextInput React Native 没有 Input，但是 TextInput 你只是语法错误。
我给按钮添加了title属性如果你想在按钮中放置文本，则无需为此添加组件，只需使用 text 属性即可

其他 cmets

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

希望我对你有帮助！

【讨论】：