写一个react-native状态按钮切换

版权声明：我写的你不能转载，但是你可以复制啊。复制记得加关注啊（迷之微笑）。 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自己写吧~~~