在活动指示器期间禁用用户交互.反应原生

Question

我想在活动指示器运行时禁用用户交互。用户不应能够在"文本输入"中再次键入并禁用可触摸不透明度按钮。

 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>
);

}}

下面显示了上述代码的设计，样式.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;

我使用尺寸根据设备尺寸获取屏幕高度和屏幕宽度，并通过将位置写入"绝对"来为活动指示器添加样式，但我仍然能够访问文本输入以及按钮单击。我想在用户单击登录按钮时实现以下操作，我需要在登录按钮下方显示活动指示器，并且必须在活动指示器期间禁用用户交互。

Answer 1

有两种

方法可以实现此目的。

1. 如果你想要按钮下面的活动指示器，那么只需删除包含{{flex：1}}样式的视图。 并且只为活动指示器的父视图提供 marginTop 样式。为此，您必须手动禁用文本输入和按钮。请参阅下面的代码。

   导出默认类 示例扩展组件 {

       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} 样式的视图。 这将包括 活动指示器 在屏幕中央

      返回 (

          <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>
      

      (