时间戳

首页 > 解决方案 > 在活动指示器期间禁用用户交互。反应原生

react-native - 在活动指示器期间禁用用户交互。反应原生

问题描述

我想在活动指示器运行时禁用用户交互。用户应该不能再次输入 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;

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

标签： react-nativeactivity-indicator

解决方案

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

  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>

      )

推荐阅读