[react-native] 07 ActivityIndicator 组件

安卓端 和 iOS端 所展示的样式也是不同的

导入组件

import {Text, View, ScrollView, StyleSheet, ActivityIndicator} from 'react-native'

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, ActivityIndicator} from 'react-native'  
  
export default function index() {  
    return (  
        <View style={[styles.container]}>  
            <ActivityIndicator  
                color="blue"  
                size={'large'}  
            />  
        </View>  
    )  
}  
  
const styles = StyleSheet.create({  
    container:{  
        flex:1,  
        justifyContent:'center',  
    }  
})

不同的尺寸更改方式：

<View style={[styles.container]}>  
    <ActivityIndicator color="blue" size={'large'} />  
    <ActivityIndicator color="black" size={'small'} />  
    <ActivityIndicator color="red" size={'70'} />  
    <ActivityIndicator color="green" size={'100'} />  
</View>

这里面需要注意的是，数字指定大小，只在安卓端有用。iOS用不了。

最简单的区分应用环境的方式 是 调用 Platform 方法

Platform.OS === 'ios' or Platform.OS === 'android'

完整版代码

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, ActivityIndicator} from 'react-native'  
  
export default function index() {  
return (  
<View style={[styles.container]}>  
<ActivityIndicator color="blue" size={'large'} />  
<ActivityIndicator color="black" size={'small'} />  
<ActivityIndicator color="red" size={'70'} />  
<ActivityIndicator color="green" size={'100'} />  
</View>  
)  
}  
  
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
}  
})