Test Suite - React Native Apps 的自动化

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

辅助功能属性

将此属性设置为


    true

，表示将视图设置为辅助功能元素。将可访问性设置为“True”可使元素自动化。默认情况下，所有可触控组件均可访问（请参阅 React Native 辅助功能）。

<View accessible={true}>
  <Text>text one</Text>
  <Text>text two</Text>
</View><View accessible={true}>
  <Text>text one</Text>
  <Text>text two</Text>
</View>

accessible

ReloadInstructions , } from 'react-native/Libraries/NewAppScreen' ; import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace' ; const App : ( ) => Node = ( ) => { const isDarkMode = useColorScheme ( ) === 'dark' ; const backgroundStyle = { backgroundColor : isDarkMode ? Colors . darker : Colors . lighter , const click = ( ) => { Alert . alert ( "click!! " ) return ( < View style = { styles . container } > < TouchableOpacity style = { styles . top } accessible = { true } > < Text accessible = { true } style = { [ styles . text1 , backgroundColor = "lightblue" ] } > Touchable opacity ( TO ) accessible = true < / Text > < Text accessible = { true } style = { [ styles . text1 , backgroundColor = "lightblue" ] } > Accessible true on TO groups all elements within TO < / Text > < / View > < Text accessible = { true } style = { styles . text2 } onPress = { click } > Accessible true text in view < / Text > < / View > < Button accessible = { true } color = "white" title = 'Button accessible true' onPress = { click } > < / Button > < / TouchableOpacity > < TouchableOpacity style = { styles . middle } accessible = { true } > < Text style = { styles . text1 } > Touchable opacity < / Text > < Text style = { styles . text1 } > accessible = true < / Text > < Text style = { styles . text1 } > Despite accessible true on TO , testID ungroups all elements within and makes them automatable < / Text > < / View > < Text testID = 'text1' style = { styles . text2 } onPress = { click } > Text with testID < / Text > < Text style = { styles . text2 } onPress = { click } > Text without testID < / Text > < View testID = 'view1' > < Text style = { styles . text2 } onPress = { click } > Text in a view with testID < / Text > < Text style = { styles . text2 } onPress = { click } > Second text in a view with testID < / Text > < / View > < Button testID = 'button1' accessible = { true } title = 'Button with testID' onPress = { click } > < / Button > < / TouchableOpacity > < TouchableOpacity style = { styles . bottom } accessible = { false } > < Text style = { styles . text1 } > Touchable opacity < / Text > < Text style = { styles . text1 } > accessible = false < / Text > < Text style = { styles . text1 } > Setting accessible false ungroups all elements contained by TO < / Text > < / View > < Text style = { styles . text2 } onPress = { click } > Text without accessible mentioned < / Text > < / View > < Button title = 'Button without accessible mentioned' onPress = { click } > < / Button > < / TouchableOpacity > < / View > const styles = StyleSheet . create ( { container : { flex : 1 , justifyContent : "space-between" , backgroundColor : "#fff" , padding : 20 , margin : 20 , top : { flex : 0.2 , backgroundColor : "grey" , borderWidth : 5 , borderRadius : 20 , justifyContent : "center" , alignContent : "center" middle : { flex : 0.4 , backgroundColor : "beige" , borderWidth : 5 , justifyContent : "center" , alignContent : "center" bottom : { flex : 0.3 , backgroundColor : "pink" , borderWidth : 5 , borderRadius : 20 , justifyContent : "center" , alignContent : "center" text1 : { alignContent : "center" , textAlign : "center" text2 : { margin : 10 , backgroundColor : "lightblue" , padding : 1 , borderWidth : 2 , button : { color : "white" , backgroundColor : "pink" } ) ; export default App ; import React from 'react'; import type { Node } from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, Alert, useColorScheme, View, TouchableOpacity, Button } from 'react-native'; import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace'; const App: () => Node = () => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, const click = () => { Alert.alert("click!! ") return ( <View style={styles.container}> <TouchableOpacity style={styles.top} accessible={true}> <Text accessible={true} style={[styles.text1, backgroundColor = "lightblue"]}>Touchable opacity(TO) accessible = true</Text> <Text accessible={true} style={[styles.text1, backgroundColor = "lightblue"]}>Accessible true on TO groups all elements within TO</Text> </View> <Text accessible={true} style={styles.text2} onPress={click}>Accessible true text in view</Text> </View> <Button accessible={true} color="white" title='Button accessible true' onPress={click}></Button> </TouchableOpacity> <TouchableOpacity style={styles.middle} accessible={true}> <Text style={styles.text1}>Touchable opacity </Text> <Text style={styles.text1}>accessible = true</Text> <Text style={styles.text1}>Despite accessible true on TO, testID ungroups all elements within and makes them automatable</Text> </View> <Text testID='text1' style={styles.text2} onPress={click}>Text with testID</Text> <Text style={styles.text2} onPress={click}>Text without testID</Text> <View testID='view1'> <Text style={styles.text2} onPress={click}>Text in a view with testID</Text> <Text style={styles.text2} onPress={click}>Second text in a view with testID</Text> </View> <Button testID='button1' accessible={true} title='Button with testID' onPress={click}></Button> </TouchableOpacity> <TouchableOpacity style={styles.bottom} accessible={false}> <Text style={styles.text1}>Touchable opacity </Text> <Text style={styles.text1}>accessible = false</Text> <Text style={styles.text1}>Setting accessible false ungroups all elements contained by TO</Text> </View> <Text style={styles.text2} onPress={click}>Text without accessible mentioned</Text> </View> <Button title='Button without accessible mentioned' onPress={click}></Button> </TouchableOpacity> </View> const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "space-between", backgroundColor: "#fff", padding: 20, margin: 20, top: { flex: 0.2, backgroundColor: "grey", borderWidth: 5, borderRadius: 20, justifyContent: "center", alignContent: "center" middle: { flex: 0.4, backgroundColor: "beige", borderWidth: 5, justifyContent: "center", alignContent: "center" bottom: { flex: 0.3, backgroundColor: "pink", borderWidth: 5, borderRadius: 20, justifyContent: "center", alignContent: "center" text1: { alignContent: "center", textAlign: "center" text2: { margin: 10, backgroundColor: "lightblue", padding: 1, borderWidth: 2, button: { color: "white", backgroundColor: "pink" export default App;