React Navigation - 如何从另一个文件调用函数并在 headerRight onPress 上使用它？

Question

我想知道有没有一种方法可以使用headerRight onPress 来做一些事情，比如调用Alert：

我在MyPet.js 中有一个函数，代码如下：

_alert=()=>{
  alert('saving')
}

在router.js 中，我有一个列表，列出了我习惯于使用如下代码进行导航的所有屏幕：

export const MyPatientStack =  StackNavigator({
  MyPatient: {
    screen: MyPatient,
    navigationOptions: {
      tabBarLabel: 'My Patient',
      tabBarIcon: ({ tintColor, focused }) => <FontAwesome name="wheelchair" size={25} color={tintColor} />,
      headerTitle: 'My Patient',
      headerStyle: {
        backgroundColor: '#8B0000',
      },
      headerLeft: <HeaderBackButton tintColor="#FFF" onPress={() => navigation.goBack()} />,
// and here I want to call the function of _alert() from MyPet.js
      headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={_alert()}/>,      
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        textAlign:'center',
        flex:1
      },
    }
  }
})

试过了，代码找不到变量_alert

我该怎么做？

欢迎任何反馈

Answer 1

由于您的 导航组件 没有参考您的 Pet.js 组件中的内容，您可以尝试以下方式

在您的Pet.js 组件中使用navigationOptions 作为

// Inside the class
// Since navigationOptions have no access to this parameter of the class, therefore you need to pass them as params
static navigationOptions = ({navigation}) => {
        const {params}} = navigation.state;
        return {
            headerRight: <FontAwesome name='search' size={20} color="#FFF" onPress={() => params.showAlert()}/> />

        };
    };


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

alertShower = () =>  Alert.alert('Success', 'Hello')