React Native Call Screen Function from Header

问题:

I have update password function inside ScreenPassword, but I want to update password by tapping Save button on screen header.

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

ScreenPassword

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

回答1:

You can make use of params and the static method 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 = () => {
    ...
  }

}