在活动指示器期间禁用用户交互。 React-Native

时间:2019-02-08 13:04:00

标签: react-native activity-indicator

我要在活动指示器运行时禁用用户交互。用户应该不能再次在TextInput中键入并禁用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 :(得分:0)

有两种方法可以实现这一目标。

  1. 如果您希望ActivityIndi​​cator 位于按钮下方,则只需删除包含 {{flex:1} }样式的视图即可。并且仅将marginTop样式赋予ActivityIndi​​cator的父视图。为此,您必须手动禁用TextInput和按钮。请参见下面的代码。

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

        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>
            );
        }
    }
    
    1. 只需删除包含flex:{1}样式的视图。它将在屏幕中央包含ActivityIndi​​cator

      返回(     

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