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

Question

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

有办法控制吗？如果这不是针对浏览器环境编译的，我希望有某种 htmlTag 属性会被忽略。

Answer 1

制作自己的 View 包装器如何？它可以检查它运行在什么环境中，然后如果它在浏览器中，那么你可以 return 标签元素代替。

Answer 2

有一个 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

Answer 3

您还可以在 TextInput 上使用 accessibilityLabel 道具，这将在 React Native 代码编译为 html for web 时向其添加 aria-label 道具.
在可访问性方面，这实现了与 label 属性相同的效果。请参阅有关可访问性的 React Native 网络文档：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>
    );
  }
}

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

React Native Web - Control the html tag generated by View?

react-native

react-native-web