javascript - 从 header 响应 native 调用屏幕功能

Question

我在 ScreenPassword 中有更新密码功能，但我想通过点击屏幕标题上的保存按钮来更新密码。

NavSettings.js

const routeConfigs = {
    Password: {
        screen: ScreenPassword,
        navigationOptions: {
            headerTitle: 'Password',
            headerTintColor: '#000',
            headerRight: (
                <View style={styles.headerRight}>
                    <Button
                        style={styles.buttonHeader}
                        color='#000'
                        title="Save"
                        onPress={???????????} />
                </View>
            )
        }
    }
}

export default createStackNavigator(routeConfigs);

屏幕密码

export default class ScreenPassword extends Component {
    updatePassword = () => {

    }
    render() {
        return (
            <ScrollView style={styles.container}>
                <View style={styles.boxForm}>
                    <TextInput
                        style={styles.textInput}
                        placeholder="Old Password"
                        secureTextEntry='true'
                    />
                    <TextInput
                        style={styles.textInput}
                        placeholder="New Password"
                        secureTextEntry='true'
                    />
                    <TextInput
                        style={styles.textInput}
                        placeholder="Confirm Password"
                        secureTextEntry='true'
                    />
                </View>
            </ScrollView>
        )
    }
}

Answer 1

您可以使用参数和静态方法 navigationOptions:

class ScreenPassword extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Password',
      headerTintColor: '#000',
      headerRight: (
        <View style={styles.headerRight}>
          <Button
             style={styles.buttonHeader}
             color='#000'
             title="Save"
             onPress={navigation.getParam('updatePassword')}
           />
         </View>
       ),
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ updatePassword: this.updatePassword});
  }

  render() {
    ...
  }

  updatePassword = () => {
    ...
  }

}