RN 组件accessibility ActivityIndicator CheckBox

accessible (iOS, Android | 无障碍元素)

设置为true时表示当前视图是一个“无障碍元素”(accessibility element)。无障碍元素会将其所有子组件视为一整个可以选中的组件。默认情况下,所有可点击的组件(Touchable系列组件)都是无障碍元素。

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

在上面这个例子中,当父视图开启无障碍属性后,我们就无法单独选中’text one’和’text two’,而只能选中整个父视图。

ActivityIndicator(菊花,加载指示器)

class RNActivityIndicatorDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {// 初始设为显示加载动画
      animating: true,
    };
  }
  render() {
    return (
      <View style={styles.container}>
         <ActivityIndicator
            animating={this.state.animating}
            style={[styles.centering, {height: 80}]}
            size="small" 
         />
         <ActivityIndicator
            animating={false}
            style={[styles.centering, {height: 80}]}
            size="large" 
         />
      </View>
    );
  }
}

CheckBox

import CheckBox from 'react-native-check-box';
 <CheckBox
     style={{flex: 1, padding: 10}}
     onClick={() => this.handleClick(item)}
     leftText={item.name}
     isChecked={item.checked}
     unCheckedImage={<Image source={require('../../res/images/ic_check_box_outline_blank.png')}
     checkedImage={<Image source={require('../../res/images/ic_check_box.png')} style={styles.checkbox}/>}
        />

猜你喜欢

转载自blog.csdn.net/snow51/article/details/80488429
RN