React native 反应本机反应导航标题按钮事件

您好，我正在尝试绑定导航器右按钮中的函数

但它给出了错误

这是我的代码：

import React，{Component}来自'React'；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native modalbox”导入模态；
从“react navigation”导入{StackNavigator}；
进口{
文本，
看法
警觉的，
样式表，
文本输入，
按钮
可触摸高光
}从“反应本机”；
从“./tabs/news tab”导入新闻选项卡；
从“./tabs/custom tab bar”导入CustomTabBar；
导出默认类主页面扩展组件{
建造师（道具）{
超级（道具）；
}
alertMe（）{
警报。警报（“sss”）；
}
静态导航选项={
标题：“Anasayfa”，
头灯：
(
自闭症
)        
};
render（）{
返回(
);
}
}

然后得到如下错误：

useLayoutEffect(() => {
   doSomethingWithYourNewParamter(navigation.getParam("openAddPopover"))
}, [navigation])

undefined不是对象（计算'this.alertMe.bind'）

---

当我在渲染函数中使用此方法时，它工作得很好，但在导航选项中我无法处理它。我能为这个问题做些什么

您应该在导航器功能中使用此选项

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        title: '[ Admin ]',
        headerTitleStyle :{color:'#fff'},
        headerStyle: {backgroundColor:'#3c3c3c'},
        headerRight: <Icon style={{ marginLeft:15,color:'#fff' }} name={'bars'} size={25} onPress={() => params.handleSave()} />
    };
};

_saveDetails() {
**write you logic here for **
}

然后你可以在函数中写下你的逻辑

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
        title: '[ Admin ]',
        headerTitleStyle :{color:'#fff'},
        headerStyle: {backgroundColor:'#3c3c3c'},
        headerRight: <Icon style={{ marginLeft:15,color:'#fff' }} name={'bars'} size={25} onPress={() => params.handleSave()} />
    };
};

_saveDetails() {
**write you logic here for **
}

---

**如果您正在使用此功能，则无需绑定函数**

可能与上面相同

   class LoginScreen extends React.Component {
      static navigationOptions = {
        header: ({ state }) => ({
          right: <Button title={"Save"} onPress={state.params.showAlert} />
        })
      };

      showAlert() {
        Alert.alert('No Internet',
          'Check internet connection',
          [
            { text: 'OK', onPress: () => console.log('OK Pressed') },
          ],
          { cancelable: false }
        )
      }

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

      render() {
        return (
          <View />
        );
      }
    }

classloginscreen扩展了React.Component{
静态导航选项={
标题：（{state}）=>({
正确的：
})
};
showarert（）{
警报。警报（“没有互联网”，
“检查互联网连接”，
[
{text:'OK'，onPress:（）=>console.log（'OK Pressed'）}，
],
{可取消：false}
)
}
componentDidMount（）{
this.props.navigation.setParams（{showarter:this.showarter}）；
}
render（）{
返回(
);
}
}

这是用于导航v4的。您需要在功能组件之外修改导航选项。您的按钮事件需要通过导航传递参数

pageName['navigationOptions'] = props => ({
    headerRight:  ()=>
         <TouchableOpacity onPress={() => props.navigation.navigate("pageRoute", 
{"openAddPopover": true})  } ><Text>+</Text></TouchableOpacity>    })

---

react导航

v5版本将是：

export const ClassDetail=（{navigation}）=>{
const handleOnTouchMoreButton=（）=>{
// ...
};
useLayoutEffect（（）=>{
navigation.setOptions({
头灯：（）=>(
),
});
}，[导航]；
返回(
// ...
)
}

@ashutosh\u pandey只有一个问题。我可以在_saveDetails（）函数中使用这个.state吗？@HerilMuratovic是的，你可以使用它。抱歉，响应太晚。要使用this.setState，请像这样绑定：

this.props.navigation.setParams（{handleSave:this.\u saveDetails.bind（this）}）我正在执行相同的操作，但是我的按钮没有显示在标题中。。为什么会这样？