Javascript 反应导航-如何从另一个文件调用函数并在headerRight onPress上使用它？

我想知道有没有一种方法可以使用

headerRight onPress

来执行类似于调用

Alert

的操作：

我在

MyPet.js

中有一个函数，其中包含以下代码：

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

在

router.js

中，我有一个列表，其中列出了我使用一段代码导航的所有屏幕，如：

导出常量MyPatientStack=StackNavigator({ 我的病人：{ 屏幕：我的病人， 导航选项：{ 标签：“我的病人”， tabBarIcon:（{tintColor，focused}）=>， 标题：“我的病人”， 头型：{ 背景颜色：“#8B0000”， }, headerLeft:navigation.goBack（）}/>， //这里我想从MyPet.js调用函数_alert（） 头灯：， 标题颜色：“#fff”， 头饰样式：{ fontWeight:'粗体'， textAlign:“中心”， 弹性：1 }, } } }) 已尝试，但代码未找到变量

\u alert

我该怎么做

---

欢迎任何反馈

因为您的导航组件没有引用您的

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

//类内部
//由于navigationOptions无法访问类的此参数，因此需要将其作为参数传递
静态导航选项=（{navigation}）=>{
const{params}}=navigation.state；
返回{
headerRight:params.showAlert（）}/>
};
};
componentDidMount（）{
this.props.navigation.setParams({
showarert:this.alertShower
});
}
alertShower=（）=>Alert.Alert（'Success'，'Hello'）

由于您的导航组件没有引用您的

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

//类内部
//由于navigationOptions无法访问类的此参数，因此需要将其作为参数传递
静态导航选项=（{navigation}）=>{
const{params}}=navigation.state；
返回{
headerRight:params.showAlert（）}/>
};
};
componentDidMount（）{
this.props.navigation.setParams({
showarert:this.alertShower
});
}
alertShower=（）=>Alert.Alert（'Success'，'Hello'）

这意味着我需要删除

router.js中的
导航选项
？是的，如果此
配置
特定于您的
Pet.js组件
，您可以添加
其余配置
，这里是
导航选项的，
RouteConfigs>Screen Property>StaticNagivatorConfig
这意味着我需要删除
router.js
中的
导航选项？是的，它是特定于您的
Pet.js组件的
配置，您可以添加
其余配置
此处为
导航选项
，
路由图>屏幕属性>静态NagivatorConfig