javascript - 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')