反应导航标题右键 [英] React navigation header right button

问题描述

我想在react-native header中添加按钮，该按钮是为了在页面中mas和unmask密码，当我改变状态以改变secureTextEntry值时点击问题，图标不会改变将保留为初始值；功能正常，但图标无法更改

I want add button in react-native header , the button is to mas and unmask password in the page, the problem on click when i change the state to change secureTextEntry value, the icon wont change will keep as the initial value; the function is working fine but the icon cant change

this.state.secureTextEntry ? "eye" : "eye-slash"

这是主要代码

 class ChangePasswordScreen extends Component {
 constructor(props) {
     super(props);
     this.state = {
         newPassword: null,
         currentPassword: null,
         confirmPassword: null,
         errors: [],
         secureTextEntry: true

     };

     this.maskPassword = this.maskPassword.bind(this)
 }
 componentDidMount() {
     this.props.navigation.setParams({
         headerRight: ( < TouchableOpacity onPress = {
                 () => {
                     this.maskPassword();
                 }
             } > < Icon style = {
                 styles.eyeIcon
             }
             name = {
                 this.state.secureTextEntry ? "eye" : "eye-slash"
             }
             size = {
                 20
             }
             color = {
                 Colors.WHITE
             }
             /></TouchableOpacity > )
     })
 }
 static navigationOptions = ({
     navigation
 }) => {
     return {
         // headerTitle: <LogoTitle />,
         headerRight: navigation.state.params && navigation.state.params.headerRight,
     };
 };
 maskPassword = () => {
     this.setState({
         secureTextEntry: !this.state.secureTextEntry
     })

 }

}

推荐答案

问题是 this.setState 不会重新渲染 header 组件.如果您想正确更改标题，则必须再次调用 setParams

The problem is this.setState will not re-render header component . if you want to change header right then you have to call setParams again

在 componentDidMount

componentDidMount() {
    this.props.navigation.setParams({
      headerRight: this.setHeaderRight(this.state.secureTextEntry)
    });
  }

设置标题右侧的功能

setHeaderRight = state => {
    //console.log("setHeaderRight", this.state.secureTextEntry);
    return (
      <TouchableOpacity
        onPress={() => {
          this.maskPassword();
        }}
      >
        <Icon
          style={styles.eyeIcon}
          name={state ? "eye" : "eye-slash"}
          size={20}
          color={Colors.WHITE}
        />
      </TouchableOpacity>
    );
  };

设置状态时再次设置标题

maskPassword = () => {
    this.setState({
      secureTextEntry: !this.state.secureTextEntry
    });
    this.props.navigation.setParams({
      headerRight: this.setHeaderRight(!this.state.secureTextEntry)
    });
  };

这篇关于反应导航标题右键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！