Question

我的页面上有两个按钮... PRofile创建按钮和PRofile编辑按钮。它们都指向同一页面，并且在另一页面上指向相同的表单。当按下编辑键时，该窗体将填充信息，如果按下btn创建新配置文件，则可以对其进行编辑，然后页面将以空白窗体加载。

我希望一旦组件加载后Page Hader就会改变，具体取决于上一页中按下的按钮。

这是我在App.js中拥有的：

  return (
    <ProfileStack.Navigator headerMode='screen'>
      <ProfileStack.Screen name="AgentAddEditPatient" component={AgentAddEditPatientPage} options={{ title:  'Add/Edit Patient' }} />
  );
}```

This is what I have on the page with the buttons:


```class AgentPatientsPage extends React.Component {


  
    launchAddPatientPage = () => {
        this.props.navigation.navigate('AgentAddEditPatient');


    launchEditPatientPage = (patient) => {
        var date = new Date();
        date.setFullYear(patient.birthYear, patient.birthMonth, patient.birthday);
        this.props.navigation.navigate('AgentAddEditPatient', {
            'id': patient.id,
            'name': patient.name,
            'sex': patient.sex,
            'pictureUrl': patient.pictureUrl,
            'bloodGroup': patient.bioData ? patient.bioData.bloodGroup : null,
            'genotype': patient.bioData ? patient.bioData.genotype : null,
            'height': patient.bioData ? patient.bioData.heightInCm : null,
            'weight': patient.bioData ? patient.bioData.weight : null,
            'allergies': patient.bioData ? patient.bioData.allergies : null,
            'birthDate': date,
        });
    }
    }```

the two buttons:

```<TouchableOpacity style={styles.topLinkBtn} activeOpacity={.5} onPress={this.launchAddPatientPage}>
                            <Text style={styles.addLink}>Add New Patient</Text>
                            </TouchableOpacity> 

<TouchableOpacity activeOpacity={.5} onPress={() => this.launchEditPatientPage(patient)}>
                                                <Image
                                                    style={styles.backButtonImage}
                                                    source={require('../assets/images/icon_edit.png')}
                                                />
                                            </TouchableOpacity>```

Answer 1

尝试一下：

this.props.navigation.navigate('AgentAddEditPatient',{'name': 'Add'});
this.props.navigation.navigate('AgentAddEditPatient',{'name': 'Edit'});

// in AgentAddEditPatient component constructor add this code below:
 
 constructor(props, context) {
    super(props, context);    
     this.state = { 
        pageName:this.props.navigation.state.params.name
     }
     
    //Then use state variable on the page render to change title like

    render() {
        return( <Text>{this.state.pageName</Text>}
    )

根据按下的按钮更改标题标题React native

1 个答案: