react-native React-Navigation头按钮testID

Question

是否可以通过一种方法将testID和accessibilityLabel添加到标题按钮（如标题后退按钮），以便编写自动测试？

Answer 1

取决于您如何设置标题中的按钮，将取决于您如何设置testID等。

返回按钮

对于<Back按钮。它使用组件HeaderBackButton.js，它已经设置了accessibilityLabel，accessibilityTraits和testID。

https://github.com/react-navigation/react-navigation-stack/blob/master/src/views/Header/HeaderBackButton.js#L110

accessibilityLabel={title ? `${title}, back` : 'Go back'}
accessibilityTraits="button"
testID="header-back"

本机按钮

如果您使用的是来自react-native的<Button />组件，则只需传递所需的testID和accessibilityLabel。

static navigationOptions = {
  headerTitle: 'Title',
  headerRight: (
    <Button
      onPress={() => alert('This is a button!')}
      title="Right"
      color="#000"
      testID='headerRightButton'
      accessibilityLabel="Right button!"
    />
  ),
  headerLeft: (
    <Button
      onPress={() => alert('This is a button!')}
      title="Left"
      color="#000"
      testID='headerLeftButton'
      accessibilityLabel="Left button!"
    />
  )
};

您自己的按钮

如果您创建了自己要使用的按钮，则必须自己处理这些按钮并将道具传递到组件的Touchable部分，有关更多信息，请参见文档https://facebook.github.io/react-native/docs/accessibility#accessibilitylabel-ios-android

这是您可以做什么的基本示例

class MyButton extends Component {
  render() {
    return (
      <TouchableOpacity onPress={() => {}}
       testID={this.props.testID}
       accessibilityLabel={this.props.accessibilityLabel}
      >
        <View>  
         // style your awesome button here
        </View>
      </TouchableOpacity>
    );
  }
}

然后您可以打电话给

<MyButton
 testID={'mybutton'}
 accessibilityLabel={'tap my button'} />

您可以/应该在testID等上设置prop默认值