来自标题的 React Native Call Screen 函数 [英] React Native Call Screen Function from Header

问题描述

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

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

屏幕密码

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

推荐答案

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

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 = () => {
    ...
  }

}

这篇关于来自标题的 React Native Call Screen 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！