Question

我要在react-native标题中添加按钮，该按钮是在页面中mas和取消屏蔽密码，当我更改状态以更改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
     })

 }

}

Answer 1

金达迟到了，也许还是可以帮助某个人的。

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

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

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

Answer 2

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

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

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

Answer 3

问题是 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 个答案: