как поставить показатель активности до и после получения из моего API - PullRequest
Новая
       6

как поставить показатель активности до и после получения из моего API

0 голосов
/ 23 января 2020

У меня есть настройки входа в систему, которые работают с моим API. Мне нужно установить индикатор активности, когда он загружается, я использую перехватчики реагирования, так что информации об этом не так много, я знаю, что мне нужно установить его в true, прежде чем при извлечении и, когда он завершает sh, снова устанавливает его в ложь, но я не могу объявить индикатор активности в том же js, что и мой файл, который извлекает api

, вот мой компонент формы входа под названием AuthForm 

 export default function AuthForm  ({ errorMessage, onSubmit }) {

  const [vCellphone, setvCellphone] = useState('');
  const [vPassword, setvPassword] = useState('');
  const [secureTextEntry, setSecureTextEntry] = useState(true);

  onPassPress = () => {
    setSecureTextEntry(!secureTextEntry);
  }

  handleChange = e => {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  };

  return (
    <View style={styles.container}>
      <Image style={styles.logo} source={require('../assets/Logotipo-All.png')} />
      <Text style={styles.textIniciar}>Iniciar sesión</Text>
      <Text style={styles.textIniciar}></Text>
      <View style={styles.inputContainer}>
        <TextInput style={styles.inputs}
          placeholder="Teléfono"
          underlineColorAndroid='transparent'
          onChangeText={newvCellphone => setvCellphone(newvCellphone)}
          keyboardType={'numeric'}
          value={vCellphone}
          autoCorrect={false}
          autoCompleteType = "off"
          required
        />
      </View>
      <View style={styles.inputContainer}>
        <TextInput style={styles.inputs}
          placeholder="Contraseña"
          secureTextEntry={secureTextEntry} 
          underlineColorAndroid='transparent'
          onChangeText={newvPassword => setvPassword(newvPassword)}
          value={vPassword}
          autoCorrect={false}
        />
        <TouchableOpacity  onPress={this.onPassPress}>
          <Image style={styles.inputIcon} source={require('../assets/Visualización.png')}/>
        </TouchableOpacity>
      </View>

      <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}  
        onPress={() => onSubmit({ vCellphone, vPassword })}>
        <Text style={styles.loginText}>INGRESAR</Text>
      </TouchableOpacity>
    </View>

  );
};

это мой код вызова API под названием AuthContext 

  const login  = dispatch => async ({ vCellphone, vPassword }) => {
    const response = await ForceApi.post('/LoginController.php', { vCellphone, vPassword });
    const Validar = response.data.error;
    await AsyncStorage.setItem('id', response.data.id);
    dispatch({ type: 'login', payload: response.data.id});
    if(Validar == false ){
    navigate('Panel');
    } 
};
export const {Provider, Context} = createDataContext(
    authReducer,
    { login, logout, clearErrorMessage, tryLocalSignin, guardar,},
    {id:null, vSolicitudeId:null,errorMessage: ''}, []
);

любая помощь будет оценена

1 Ответ

0 голосов
/ 23 января 2020

Попробуйте это, в AuthForm создайте новое состояние, называемое проходом загрузки на onSubmit с vCellphone и vPassword и при действии входа в систему до ForceApi установите загрузку в значение true setloading(true) после ответа снова установите в загрузку значение false setLoading(false)

ActivityIndicator имеет реквизит, называемый загрузкой прохода анимации, когда загрузка истинна, она анимируется, а когда ложь останавливается

Примерно так 

  const fetchData = async () => {
    setLoading(true);
    const res = await axios.get("${API_URL}");
    setData(
        res.data.map(el => {
          const fromApi = fetchIncomes(el.id);
          return {
            ...el,
            ...fromApi
          };
        })
      )
    setLoading(false);
  };```

I can remember I had use this method on one of my App, it works pretty well.
...