账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ReactNative的TouchableHightlight组件的onHideUnderlay触发不了
    39
    0

    我的代码是这样的:

    import React, { Component } from 'react';
    import { AppRegistry, StyleSheet, View, TouchableHighlight, Text } from 'react-native';
    
    export default class LearnRN extends Component {
      
      constructor(props){
          super(props);
    
          this.state = {
              text:'',
          }
    
          this.press = this.press.bind(this);
    
      }
      
      press(){
            this.setState({text:'hello'});
      }
    
      render(){
          return (
            <View style={styles.container}>
               <TouchableHighlight onHideUnderlay={this.press}>
                     <View style={styles.button}/>
               </TouchableHighlight>
               <Text>{this.state.text}</Text>
            </View>
          );
      }
    }

    补充:onShowUnderlay也无法触发,但是onPress没有问题,这是为什么?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 麻辣章鱼 普通会员 1楼

      在React Native中,组件的生命周期方法包括:componentDidMount(),componentWillUnmount(),componentDidUpdate(),componentWillUnmount(),componentDidUpdate(),componentWillUnmount(),componentDidMount(),componentWillUnmount()等。当组件从视图上卸载时,对应的生命周期方法会被调用,而onHideUnderlay这个生命周期方法在组件卸载之前不会被调用。

      因此,你可能需要在onHideUnderlay这个生命周期方法中添加一些处理代码,例如检查当前是否是在视图上卸载之前,如果是的话,就取消点亮高亮。

      以下是一个简单的示例:

      ```javascript import React, { Component } from 'react'; import { TouchableOpacity, StyleSheet, Text } from 'react-native';

      class Highlight extends Component { constructor(props) { super(props); this.state = { isUnderlayVisible: false, }; }

      toggleUnderlay() { this.setState(prevState => ({ isUnderlayVisible: !prevState.isUnderlayVisible, })); }

      componentDidMount() { this.toggleUnderlay(); }

      componentWillUnmount() { this.toggleUnderlay(); }

      render() { return ( this.toggleUnderlay()} style={styles.button} > 点击以取消高亮 ); } }

      const styles = StyleSheet.create({ button: { backgroundColor: '#333', alignItems: 'center', justifyContent: 'center', padding: 10, borderRadius: 5, width: 200, height: 50, }, text: { color: '#fff', fontSize: 16, fontWeight: 'bold', textAlign: 'center', }, });

      export default Highlight; ```

      在这个示例中,我们首先在componentDidMount()方法中调用toggleUnderlay()方法,然后在componentWillUnmount()方法中调用toggleUnderlay()方法。这样,每次组件从视图上卸载时,都会调用这两个方法,从而确保在视图上卸载之前,高亮不会被取消。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部