Отключить взаимодействие с пользователем во время индикатора активности.Реагировать-Native - PullRequest
Новая
       25

Отключить взаимодействие с пользователем во время индикатора активности.Реагировать-Native

0 голосов
/ 08 февраля 2019

Я хочу отключить взаимодействие с пользователем, когда работает индикатор активности.Пользователь не должен снова вводить текстовые данные и отключать кнопку touchableopacity.

 render() {
return (
  <View style={styles.container}>
    <View style={styles.backgroundContainer}>
      <Image
        source={require("./background-image.jpg")}
        resizeMode="cover"
        style={styles.backdrop}
      />
    </View>

    <View style={styles.contentContainer}>
      <View style={styles.subContainer}>
        <Image style={styles.image} source={require("./logo.png")} />

        <TextInput
          // editable={!this.props.isLoginLoading}
          style={styles.input}
          ref={"input1"}
          placeholder="Enter your mobile number"
          maxLength={10}
          onChangeText={value => this.setState({ mobilenumber: value })}
        />

        <TouchableOpacity
          // activeOpacity={this.getOpacity()} //newly added
          onPress={this.onPress}
        >
          <View style={styles.button}>
            <Text style={styles.buttonText}>Login</Text>
          </View>
        </TouchableOpacity>
      </View>

      {this.props.isLoginLoading && (
        <View style={styles.indicator}>
          <ActivityIndicator color={"blue"} />
        </View>
      )}
    </View>
  </View>
);

}}

Ниже показан дизайн для приведенного выше кода, styles.js 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#FFFFFF"
  },

  backgroundContainer: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },

  contentContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },

  subContainer: {
    alignItems: "center"
  },

  backdrop: {
    flex: 1
  },

  image: {
    marginBottom: Metrics.screenHeight * 0.075,
    resizeMode: "contain",
    width: Metrics.screenWidth * 0.35,
    height: Metrics.screenHeight * 0.25
  },

  input: {
    borderWidth: 1,
    marginBottom: Metrics.screenWidth * 0.03,
    width: Metrics.screenWidth * 0.626,
    backgroundColor: "lightgrey"
  },

  button: {
    width: Metrics.screenWidth * 0.626,
    height: Metrics.screenHeight * 0.06,
    alignItems: "center",
    backgroundColor: "#8c0d04",
    fontWeight: "bold"
  },

  buttonText: {
    padding: Metrics.screenHeight * 0.0165,
    color: "#FFFFFF",
    fontWeight: "bold",
    alignItems: "center",
    justifyContent: "center"
  },

  indicator: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    // width: "100%",
    // height: "100%",
    justifyContent: "center",
    alignItems: "center"
    // borderWidth: 5,
    // borderColor: "yellow"
  }
});

export default styles;

Я использовал размеры, чтобы получитьВысота экрана и ширина экрана в соответствии с размером устройства и добавленным стилем для индикатора активности, записав положение в «абсолютное», но все же я могу получить доступ к вводу текста, а также нажатию кнопки.Я хочу добиться следующего, когда пользователь нажимает кнопку входа в систему, мне нужно показать индикатор активности под кнопкой входа в систему, и мне нужно отключить взаимодействие с пользователем во время индикатора активности.

1 Ответ

0 голосов
/ 08 февраля 2019

Это можно сделать двумя способами.

  1. Если вы хотите ActivityIndicator ниже кнопки , просто удалите представление, содержащее {{flex:1} } стиль.и только назначить стиль marginTop для родительского представления ActivityIndicator.Для этого вы должны отключить TextInput и кнопку вручную.Пожалуйста, смотрите код ниже.

    класс экспорта по умолчанию. Пример extends Component {

        onPress() {
        if (!this.props.isLoginLoading) {
           // skip if isLoginLoading is true
        }

    }
    getOpacity() {
        if (this.props.isLoginLoading) {
            return 1;
        }
        return 0
    }
    render() {
        return (
            <View style={styles.container}>

                <View style={styles.backgroundContainer}>
                    <Image source={require('./background-image.jpg')} resizeMode='cover' style={styles.backdrop} />
                </View>

                <View>
                    <View>
                        <Image
                          style={styles.image}
                          source={require('./logo.png')}
                      />
                    </View>

                    <View style={styles.textinputview}>
                        <TextInput
                            editable={!this.props.isLoginLoading} //do editable false when loading is true
                            style={styles.input}
                            ref={'input1'}
                            placeholder='Enter your mobile number'
                            maxLength={10}
                            onChangeText={value => this.setState({ mobilenumber: value })}
                        />
                    </View>

                    <View style={styles.touchableview}>
                        <TouchableOpacity
                            activeOpacity={this.getOpacity()} //set activopacity to 1 to indicate button is disable, when loading is true
                            onPress={this.onPress.bind(this)}>
                            <View style={styles.button}>
                                <Text style={styles.buttonText}>Login</Text>
                            </View>
                        </TouchableOpacity>
                    </View>


                </View>
                {this.props.isLoginLoading &&
                    <View
                        style={{
                            marginTop:10
                        }} >
                        <ActivityIndicator color={'blue'} />
                    </View>
                }
            </View>
        );
    }
}

  2. просто удалите представление, содержащее стиль flex: {1}.который будет включать ActivityIndicator в центре экрана

    return (

        <View style={styles.backgroundContainer}>
        <Image source={require('./background-image.jpg')} resizeMode='cover' style={styles.backdrop} />
    </View>

    <View>
        <View>
            <Image
                style={styles.image}
                source={require('./logo.png')}
            />
        </View>

        <View style={styles.textinputview}>
            <TextInput
                style={styles.input}
                ref={'input1'}
                placeholder='Enter your mobile number'
                maxLength={10}
                onChangeText={value => this.setState({ mobilenumber: value })}
            />
        </View>

        <View style={styles.touchableview}>
            <TouchableOpacity onPress={this.onPress}>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>Login</Text>
                </View>
            </TouchableOpacity>
        </View>
    </View>
        {this.props.isLoginLoading &&
            <View
                style={{
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        width:'100%',
                        height:'100%',
                        justifyContent: 'center',
                        alignItems: 'center'
                }}>
                <ActivityIndicator color={'blue'} />
            </View>
        }
</View>

    )

...