版权声明:我写的你不能转载,但是你可以复制啊。复制记得加关注啊(迷之微笑)。 https://blog.csdn.net/quhongqiang/article/details/88128023
效果是这样的
因为是自学的,所以很多地方要自己摸索,贴个代码,不懂的可以一起讨论,虚心求教!~~
import React, {Component} from 'react';
import { View, Text, Button, StyleSheet, Image, TouchableOpacity,TextInput, ScrollView } from 'react-native';
class ServiceList extends Component {
constructor(props) {
super(props);
this.state = {
statrArr: [{
title: '全部',
index: 1,
},{
title: '已服务',
index: 2,
},{
title: '已取消',
index: 3,
},{
title: '待服务',
index: 4,
},{
title: '服务中',
index: 5,
},{
title: '已创建',
index: 6,
}],
activeBtn: 1, //初始选中第一个
};
}
_activeBtn = (index) => {
this.setState({
activeBtn: index,
})
}
render() {
let {statrArr} = this.state;
return (
<View style={styles.container}>
{
statrArr ? statrArr.map((list, index) => {
return (
<View key={index} style={styles.view}><Text style={[styles.btn, list.index === this.state.activeBtn ? styles.activeColor : styles.btn]} onPress={() => {
this._activeBtn(list.index)
}}>{list.title}</Text></View>
)
}) : ''
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: "100%",
height: '100%',
backgroundColor: '#f5f5f5',
position: 'relative',
},
view: {
width: '33%',
justifyContent: 'center',
alignItems:'center',
},
btn: {
borderStyle: 'solid',
borderColor: '#cccccc',
borderWidth: 1,
width: 90,
height: 30,
textAlign: 'center',
lineHeight: 30,
color: '#999999',
fontSize: 15,
marginBottom: 15,
},
activeColor: {
backgroundColor: 'rgba(37, 163, 255, 1)',
color: '#ffffff',
},
button: {
flex: 1,
paddingLeft: 0,
paddingRight: 0,
height: 44,
backgroundColor: '#ffffff',
color: '#4a4a4a',
textAlign: 'center',
lineHeight: 44,
fontSize: 16,
fontFamily: 'PingFang-SC-Medium',
},
})
export default ServiceList
css自己写吧~~~