我有一個導航:
const MessageStack = createStackNavigator() 。
const MessageNavigator = (/span>) => (
<MessageStack.Navigator>
<MessageStack. 螢屏 name="Messages" component={MessagesScreen} />
<MessageStack.Screen。
name="Chat"
component={ChatScreen}>
options={({ route }) => ({
title: route.params.thread.username,
headerRight: () => (
<Text style={{paddingEnd: 10}} onPress={}>View Profile</Text>
),
})}
/>
</MessageStack.Navigator>
)
我的聊天螢屏：
function ChatScreen（{ route }）{
const { thread } = route.params
const [messages, setMessages] = useState([] )。
const createTwoButtonAlert = () =>
Alert.alert(
"警報標題"。
"My Alert Msg"。
[
{
text: "取消"。
onPress: () => console.log("Cancel Pressed") 。
style: "取消"。
},
{ text: "OK", onPress: () => console.log("ok pressed") }
]
);
從導航欄的rightButton：
span class="hljs-attr">headerRight: () => (
<Text style={{paddingEnd: 10}} onPress={}>查看個人資料</Text>
),
我想在我的chatScreen中呼叫這個函式createTwoButtonAlert并使警報出現。
uj5u.com熱心網友回復：
在react-native-navigation網站上有一個例子。
在這個例子中，你在螢屏組件中而不是在路由器組件中定義了headerRight屬性。
function ChatScreen（{ route, navigation }）{
const { thread } = route.params
const [messages, setMessages] = useState([] )。
useLayoutEffect(() => {
const createTwoButtonAlert = (/span>) => {
Alert.alert(
'警報標題'。
'My Alert Msg',
[
{
text: '取消'。
onPress: () => console.log('取消按下')。
style: '取消'。
},
{ text: 'OK', onPress: () => console.log('OK pressed') }
]
);
};
navigation.setOptions（{
headerRight: () => (
<Text onPress={（）/span> => createTwoButtonAlert()}>View Profile</Text>
),
});
}, [navigation])。
}
uj5u.com熱心網友回復：
你可以在你的ChatScreen本身中指定headerRight屬性，借助navigation.setOptions()
function ChatScreen（{ route, navigation }）{
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<Text style={{ paddingEnd: 10 }}}。onPress={createTwoButtonAlert}>
查看資料
</Text>/span>
),
});
}, [navigation])。
const createTwoButtonAlert = () =>
Alert.alert('Alert Title', 'My Alert Msg', [
{
text: '取消'。
onPress: () => console.log('取消按下')。
style: '取消'。
},
{ text: 'OK', onPress: () => console.log('OK Pressed') },
]);
return (
//your view; return (
);
};
檢查這個 Live snack
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/309152.html
標籤：