这些都是一些官方组件,由于样式上并不能完全自定义,一般不会直接用于实际项目中,但可以作为设计属性和结构组件时的一个参考例子,如入参的设计。
ActivityIndicator
显示一个圆形的加载中提示符号。ActivityIndicator在实际应用中一般为绝对布局,居中显示。
属性 | 描述 |
---|---|
style | 用于设置布局类型 |
animating | true | false,表示符号的显示或隐藏,当为true时表示显示 |
size | large | small,表示符号的尺寸 |
color | 符号的颜色 |
贴上代码:
import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
class ActivityIndicatorComp extends React.Component{
render(){
return(
<View style={styles.containerStyle}>
<View style={styles.layoutStyle} />
<ActivityIndicator style={styles.indicatorStyle} animating={true} size="large" color="#EE5E7B" />
</View>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
position:'absolute',
width: '100%',
height: '100%'
},
layoutStyle: {
position:'absolute',
width: '100%',
height: '100%',
backgroundColor: '#000000',
opacity: 0.2
},
indicatorStyle: {
position:'absolute',
left:0,
right:0,
top:0,
bottom:0,
margin:'auto'
}
});
export default ActivityIndicatorComp;
效果:
Slider
范围值选择组件,如音量控制。用法请看注释,贴上代码:
import React from 'react';
import { View, Text, Slider, StyleSheet } from 'react-native';
class SliderComp extends React.Component{
constructor(props){
super(props);
this.state = {
slidervalue: 50
};
}
_onChange = (value) => {
this.setState({slidervalue:value});
}
_onSlidingComplete = (value) => {
console.log('用户松开滑块了,当前值为'+value);
}
render(){
return(
<View style={styles.container}>
<Slider
style={{width: 300, height: 50}} // 样式,需要至少设置一个宽度
disabled={false} // 如果为true,用户就不能移动滑块。默认为false
minimumValue={0} // 滑块的最小值(当滑块滑到最左端时表示的值)。默认为0。
maximumValue={100} // 滑块的最大值(当滑块滑到最右端时表示的值)。默认为1。
thumbTintColor='red' // 滑块的颜色(仅android有效),ios使用thumbImage传入一张静态图
minimumTrackTintColor="red" // 滑块左侧轨道的颜色。在iOS上默认为一个蓝色的渐变色。
maximumTrackTintColor="gray" // 滑块右侧轨道的颜色。在iOS上默认为一个灰色的渐变色。
value={this.state.slidervalue} // 滑块的值
onValueChange={this._onChange} // 在用户拖动滑块的过程中不断调用此回调
onSlidingComplete={this._onSlidingComplete} // 用户松开滑块的时候调用此回调,无论值是否变化。回调值为当前值
step={1} // 滑块的步长,值应该在0到(maximumValue - minimumValue)之间,默认值为0
/>
<Text>当前选择的value:{this.state.slidervalue}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
export default SliderComp;
效果:
Switch
开关组件,无法通过宽高调整大小,只能用scale来调整。用法请看注释,贴上代码:
import React from 'react';
import { View, Switch, StyleSheet, Text } from 'react-native';
class SwitchComp extends React.Component{
constructor(props){
super(props);
this.state = {
value: false
};
}
_onValueChange = (value) => {
this.setState({value});
}
render(){
return(
<View style={styles.containerStyle}>
<View style={styles.switchViewStyle}>
<Text>是否打开WIFI:</Text>
<Switch
style={styles.switchStyle}
disabled={false} // 如果为true则禁用此组件的交互
value={this.state.value} // 表示此开关是否打开。默认为false(关闭状态)
onValueChange={this._onValueChange} // 当值改变的时候调用此回调函数,参数为新的值
trackColor={{'false':'gray','true':'green'}} // 开启和关闭状态时的背景颜色
thumbColor="white" // 开关上圆形按钮的背景颜色。在iOS上设置此颜色会丢失按钮的投影。
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
switchViewStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
switchStyle: {
marginLeft: 20,
transform: [{scale: 2}]
}
});
export default SwitchComp;
效果:
StatusBar
手机屏幕顶部的状态栏。用法请看注释,贴上代码:
import React from 'react';
import {
StyleSheet,
View,
StatusBar,
Text,
Button
} from 'react-native';
class StatusBarComp extends React.Component{
constructor(props){
super(props);
this.state = {
animated: true,
hidden: false,
backgroundColor:'white',
barStyle: 'dark-content',
translucent:false,
networkActivityIndicatorVisible:false,
showHideTransition:'fade',
};
}
render() {
return (
<View style={styles.container}>
<StatusBar
animated={this.state.animated} // 指定状态栏的变化是否应以动画形式呈现。
barStyle={this.state.barStyle} // 设置状态栏文本的颜色。枚举类型:'default'|'light-content'|'dark-content'
hidden={this.state.hidden} // 是否隐藏状态栏
backgroundColor={this.state.backgroundColor} // (android)状态栏的背景色
translucent={this.state.translucent} // (android)指定状态栏是否透明。设置为true时,应用会延伸到状态栏之下绘制(即所谓“沉浸式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用
networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible} // (ios)指定是否显示网络活动提示符
showHideTransition={this.state.showHideTransition} // (ios)通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'
/>
<View style={styles.viewStyle}>
<Text>动画过渡:</Text>
<Button
title={this.state.animated ?'禁用动画':'使用动画'}
onPress={() => { this.setState({ animated:!this.state.animated }); }}
/>
</View>
<View style={styles.viewStyle}>
<Text>隐藏/显示:</Text>
<Button
title={this.state.hidden?'显示':'隐藏'}
onPress={() => { this.setState({ hidden:!this.state.hidden }); }}
/>
</View>
<View style={styles.viewStyle}>
<Text>设置背景色(android):</Text>
<Button title='红色' onPress={()=>{this.setState({backgroundColor:'red'});}}/>
<Button title='蓝色' onPress={()=>{this.setState({backgroundColor:'blue'});}}/>
<Button title='灰色' onPress={()=>{this.setState({backgroundColor:'gray'});}}/>
</View>
<View style={styles.viewStyle}>
<Text>状态栏了占位(透明时不占位置,android):</Text>
<Button
title={this.state.translucent?'不透明':'透明'}
onPress={()=>{this.setState({translucent:!this.state.translucent});}}
/>
</View>
<View style={styles.viewStyle}>
<Text>设置文本样式:</Text>
<Button title='default' onPress={()=>{this.setState({barStyle:'default'})}}/>
<Button title='light-content' onPress={()=>{this.setState({barStyle:'light-content'});}}/>
<Button title='dark-content' onPress={()=>{this.setState({barStyle:'dark-content'});}}/>
</View>
<View style={{flexDirection:'row',alignItems:'center'}}>
<Text>显示或隐藏动画效果(ios):</Text>
<Button title='fade' onPress={()=>{this.setState({showHideTransition:'fade'});}}/>
<Button title='slide' onPress={()=>{this.setState({showHideTransition:'slide'});}}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
viewStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}
});
export default StatusBarComp;
效果:
Alert
系统通知弹窗,实际上是通过Modal组件封装而成。用法请看注释,贴上代码:
import React from 'react';
import { View, Button, Alert } from 'react-native';
// 提示对话框(系统默认样式),也可以通过Modal组件自定义构建界面实现同样效果
class AlertAPI extends React.Component {
_openAlert = () => {
Alert.alert(
'提示',
'是否允许App上传错误数据?',
[
{text: '稍后询问我', onPress: () => console.log('Ask me later pressed')},
{text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: '允许', onPress: () => console.log('OK Pressed')},
], // 当数组有为两个对象时,为取消和允许;当数组仅有一个对象时,为允许。
{ cancelable: false }
);
}
render(){
return(
<View>
<Button
onPress={()=>{
this._openAlert();
}}
title="打开Alert弹窗"
/>
</View>
);
}
}
export default AlertAPI;
效果: