写一个react-native状态按钮切换 Dear 丶 2022-03-14 13:46 172阅读 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
还没有评论,来说两句吧...