1

我正在使用 [React Native Switch][1]。

在下面的代码片段中，我调用了两个 API：apiActive()和apiInactive().

基于booking_status，如果booking_status === "0"它会显示ACTIVE，如果booking_status === "1" 它会显示INACTIVE。

到目前为止，当我按下 Switch 时，它会调用 API 并booking_status从0to更改，1反之亦然。同样，Switch 的状态从false变为true。

但是，我正在努力实现以下目标：

  1. 基于booking_status，我希望 Switch 显示true或false。也就是说，如果booking_status === "0"，则 Switch 将保持不变false，如果booking_status === "1"，则 Switch 将保持不变true（类似于INACTIVE和ACTIVE的显示方式）。

  2. 此外，当我按下 Switch 时，我希望调用 API。例如：如果booking_status === "0"，按下 Switch 后会调用apiActive()，同时 Switch 状态变为true，文本由INACTIVE变为ACTIVE，反之亦然。

代码片段：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Picker,
    ActivityIndicator,
} from 'react-native';
    import axios from 'axios';
    import Constants from '../../constants/Constants';
    import AsyncStorage from '@react-native-community/async-storage';
    
    class Datelist extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                switchValue: false,
            }
        }

        apiActive() {
            //api call active
        }
    
        apiInactive() {
            //api call inactive
        }

        toggleSwitchStatus = (value) => {
            {
                this.props.booking_status === "0" ?
                    this.apiActive() :
                    this.apiInactive();
            }
    
            this.setState({ switchValue: value })
            console.log('Status: ', value);
        }
    
        render() {
            return (
                <ScrollView>
                    <View style={styles.mf_container}>
                        <TouchableOpacity>
                            <Text style={styles.textStartDate}>{this.props.date_start} status: {this.props.booking_status}</Text>
                        </TouchableOpacity>
    
                        <View>
                            <TouchableOpacity
                                style={styles.center}
                            >
                                {
                                    <Text style={styles.inactive}>
                                        {
                                            this.props.booking_status === "0" ?
                                                <Text style={{ color: 'red', fontWeight: 'bold' }}>INACTIVE</Text> :
                                                <Text style={{ color: 'green', fontWeight: 'bold' }}>ACTIVE</Text>
                                        }
                                    </Text>
                                }
                            </TouchableOpacity>
                            {
                                <Switch
                                    style={styles.center}
                                    onValueChange={this.toggleSwitchStatus}
                                    value={this.state.switchValue}
                                />
                            }
                        </View>
                    </View>
                </ScrollView>
            );
        }
    }
    
    export default withNavigation(Datelist);

在过去的几个小时里，我一直在尝试解决这个问题，但此时真的很烦人。如果需要 API 代码，我很乐意添加它。 [1]：https ://reactnative.dev/docs/switch

4

0 回答 0