---
title: "React Native-Ansichten in Android und iOS taggen"
slug: "tag-react-native-views-in-android"
updated: 2024-06-11T04:24:06Z
published: 2024-06-11T04:24:06Z
canonical: "support.whatfix.com/tag-react-native-views-in-android"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native-Ansichten in Android und iOS taggen

Whatfix Mobile verwendet testID, um den Bildschirm eindeutig zu identifizieren, der in den Test-Frameworks Espresso und Appium verwendet wird.

### Warum sollten Sie React Native-Ansichten in Android taggen?

Whatfix Mobile identifiziert den Bildschirm von nativen Apps eindeutig mit den Eigenschaften eines Elements wie Ressourcen-ID und Tag auf dem Bildschirm. Im React Native wird die resource-id zur Laufzeit automatisch generiert. Daher ist es nicht zuverlässig, einen Bildschirm mit resource-id zu identifizieren. Aber das Tag wird nicht automatisch generiert; es muss manuell hinzugefügt werden. Um Elemente zu markieren, müssen Sie dem Element ein Attribut namens testID hinzufügen. ReactNative konvertiert das testID Attribut in das tag Attribut.

### Warum sollten Sie React Native-Ansichten in iOS taggen?

Whatfix Mobile identifiziert den Bildschirm von nativen Apps eindeutig mit den Eigenschaften eines Elements namens dem Erreichbarkeit Label auf dem Bildschirm. Um die Elemente zu taggen, müssen Sie dem Element ein Attribut namens testID hinzufügen. ReactNative konvertiert das testID Attribut in das Erreichbarkeit Attribut.

              your title goes here

              

Für weitere Informationen über React Native Views und Identifikatoren sehen Sie,

- [Ansicht in React Native](https://reactnative.dev/docs/view.html#testid)
- [React Native und eindeutige Identifikatoren](https://developers.perfectomobile.com/display/TT/React-Native+and+unique+identifiers)

### Wie taggt man Ansichten?

Sie können Ansichten markieren, indem Sie das Attribut testID zu den React Native-Ansichten hinzufügen. Hier ist eine Liste der grundlegenden React Native-Ansichten mit Beispielen, wie Sie testID hinzufügen können. Sie können jede React Native-Ansicht auf ähnliche Weise markieren.

              your title goes here

              

Weisen Sie der Ansicht auf dem aktuellen Bildschirm eine eindeutige testID zu. Wenn die TestID eindeutig ist, ist die Kontexterkennung besser.

    Ansicht
    
     

Betrachten Sie eine Ansicht, die drei Kinder hat. Sie können Test-ID wie im folgenden Code-Snippet gezeigt zuweisen.

```
<View style={{ flexDirection: "row", height: 100, padding: 20}}>
      <View testID="tag_view_blue" style={{ backgroundColor: "blue", flex: 0.3 }} />
      <View testID="tag_view_red" style={{ backgroundColor: "red", flex: 0.5 }} />
      <Text testID="tag_text_hello_world" >Hello World!</Text>
</View>
```

    Button
    
     

```
<Button
  onPress={onPressLearnMore}
  title="Learn More"
  testID="tag_button_learn_more"  
/>
```

    Text
    
     

```
<Text testID="tag_text_hello_world_base" style={styles.baseText}>
  <Text testID="tag_text_title_hello_world" style={styles.titleText} onPress={onPressTitle}>
    {"Hello world"}
    {"\n"}
    {"\n"}
  </Text>
  <Text testID="tag_text_body_hello_world" numberOfLines={5}>{bodyText}</Text>
</Text>
```

    Texteingabe
    
     

```
<TextInput testID="tag_inputtext_enter_name" style={styles.input} 
      onChangeText={onChangeText} placeholder="Enter Name"/>
```

    Bild
    
     

```
<Image testID="tag_image_react_native_tiny_logo"
       style={styles.tinyLogo}
       source={{
          uri: 'https:>
```

 

 
 
  
    Bildhintergrund
    
     

```
<ImageBackground 
     testID="tag_bg_image_inside_text"
     source={image} style={styles.image}>
     <Text style={styles.text}>Innerhalb</Text>
</ImageBackground>
```

 

 
 
 
    Switch
    
     

```
<Switch testID="tag_switch_privacy_policy"
        onValueChange={toggleSwitch}
      />
```

 

 
 
  
    Tab Navigation
    
     

```
<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen testID="tag_tab_home_screen_selected" name="Home" component={HomeScreen} />
    <Tab.Screen testID="tag_tab_setting_screen" name="Settings" component={SettingsScreen} />
  </Tab.Navigator>
</NavigationContainer>
```

 

 
 

              your title goes here

              

Immer wenn eine Ansicht ausgewählt wird, ändert sich ihre Eigenschaft ausgewählt von falsch auf wahr. Aber im Fall der Tab-Navigation ändert sich die Eigenschaft ausgewählt nicht. In diesem Fall wird Leap nicht in der Lage sein, den ausgewählten Tab zu identifizieren. Um den ausgewählten Tab zu identifizieren, fügen Sie die testID mit _ausgewählt Taste an. In diesem Szenario, wenn der Tab "HomeScreen" ausgewählt ist, ändern Sie die testID in tag_tab_home_screen_selected. Wenn Einstellungen Tab ausgewählt ist, ändern Sie testID in tag_tab_setting_screen_selected.

 
    WebViews
    
     

```
<WebView
        testID='tag_webview_product_page'          
        source={{ uri: sourceUri }}
        javaScriptEnabled={true}
/>
```

 

 
 
  
    ScrollAnsicht
    
     

```
<ScrollView
        testID='tag_scrollview_product_page'          
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
 refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text testID='tag_text_pull_down_to_refresh'>Ziehen Sie nach unten, um den RefreshControl-Indikator zu sehen</Text>
      </ScrollView>
```