Реагировать на собственный переключатель и переключать вызов API - PullRequest
Новая
       32

Реагировать на собственный переключатель и переключать вызов API

1 голос
/ 17 марта 2020

Я использую React Native Switch .

В приведенном ниже фрагменте кода я вызываю два API: apiActive() и apiInactive().

На основе booking_status, если booking_status === "0", то будет отображаться ACTIVE, а если booking_status === "1", то будет отображаться INACTIVE.

. До сих пор, когда я нажимаю переключатель, он вызывает API и booking_status изменяется с 0 на 1 и наоборот. Аналогично, состояние коммутатора меняется с false на true.

Однако я пытаюсь достичь следующей цели:

  1. На основе booking_status, я хочу, чтобы коммутатор показывал true или false. То есть, если booking_status === "0", коммутатор останется false, а если booking_status === "1", коммутатор останется true (аналогично тому, как отображаются INACTIVE и ACTIVE).

  2. Также, когда я нажимаю Switch, я хочу, чтобы API вызывались. Например: если booking_status === "0", то после нажатия на переключатель он вызовет apiActive(), и в то же время состояние переключателя изменится на 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, я бы с радостью добавил его.

...