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

Dear 丶 2022-03-14 13:46 207阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70][]

效果是这样的

因为是自学的，所以很多地方要自己摸索，贴个代码，不懂的可以一起讨论，虚心求教！~~

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自己写吧~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220313/680b5ba6770b4ebfa2524f2fd597d8e8.png