React Native Web - 控制View生成的html标签？答案

【问题标题】：React Native Web - Control the html tag generated by View?React Native Web - 控制View生成的html标签？
【发布时间】：2020-02-13 23:03:33
【问题描述】：

我有一个 React Native Web 项目。在某一时刻，我希望我的 View 而不是生成 <div> 来生成 <label> 元素。

有没有办法控制它？我希望某种htmlTag 属性在不为浏览器环境编译时会被忽略。

【问题讨论】：

标签： react-native react-native-web

【解决方案1】：

有一个 component 属性，但它已被删除以支持 accessibilityRole (Remove component prop)。

您可以使用accessibilityRole 指定label 标签，甚至可以使用它创建自定义元素：

function Label({ text }) {
  return <View accessibilityRole="label">{text}</View>
}

然后像这样使用它：

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View>
          <Label text="Test input:"/>
          <TextInput name="test-input"/>
        </View>
      </View>
    );
  }
}

查看这个正在工作的世博小吃：https://snack.expo.io/@clytras/change-rn-web-div-tag

【讨论】：

【解决方案2】：

制作自己的 View 包装器怎么样？它可以检查它在什么环境中运行，然后如果它在浏览器中，那么您可以返回标签元素。

【讨论】：

这将如何工作？你能举个例子吗？我遇到的整个问题是我不知道如何发出一个不是原生反应的 html 标签 - 据我所知，因为它的反应原生不反应正在运行，如果没有对 RN 的支持，这是不可能的

【解决方案3】：

您还可以在 TextInput 上使用 accessibilityLabel 属性，当 React Native 代码编译为 web 的 html 时，它将添加一个 aria-label 属性。
在可访问性方面，这实现了与label 属性相同的效果。请参阅 React Native Web 文档以了解可访问性：https://necolas.github.io/react-native-web/docs/accessibility/

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View>
          <TextInput accessibilityLabel="test-input" name="test-input"/>
        </View>
      </View>
    );
  }
}

【讨论】：