反应导航标题右键答案

【问题标题】：React navigation header right button反应导航标题右键
【发布时间】：2020-01-07 21:13:01
【问题描述】：

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

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

 }

}

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

有点晚了，不过可能会帮助别人。

如果您希望从屏幕本身而不是 App.js 文件向屏幕标题添加按钮，并且您正在使用功能组件，则如下所示：

import { useNavigation } from '@react-navigation/native'

export default function () {
  const nav = useNavigation();
  useEffect(() => {
    nav.setOptions({
      headerRight: () => <Button />,
    });
  }
}

【讨论】：

【解决方案2】：

问题是 this.setState 不会重新渲染头部组件。如果你想改变标题，那么你必须再次调用 setParams

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

【讨论】：

【解决方案3】：

您正在将组件设置为组件安装时的导航参数，并在组件安装时传递状态值。

此参数永远不会再次更改或更新，因此导航标题永远不会重新呈现。

更好的方法是将 state 的值直接作为导航参数传递，并在导航选项中直接使用的组件中使用它

【讨论】：