React Navigation - 右键功能答案

【问题标题】：React Navigation - Right button functionReact Navigation - 右键功能
【发布时间】：2021-09-15 10:21:07
【问题描述】：

我有一个导航：

const MessageStack = createStackNavigator();
const MessageNavigator = () => (
<MessageStack.Navigator>
    <MessageStack.Screen 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(
  "Alert Title",
  "My Alert Msg",
  [
    {
      text: "Cancel",
      onPress: () => console.log("Cancel Pressed"),
      style: "cancel"
    },
    { text: "OK", onPress: () => console.log("OK Pressed") }
  ]
);

从导航栏中的右侧按钮：

headerRight: () => (
    <Text style={{paddingEnd:10}} onPress={}>View Profile</Text>
),

我想在我的chatScreen createTwoButtonAlert 中调用该函数并显示警报。

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案1】：

react-native-navigation 网站上有一个例子。

在此示例中，您在 Screen 组件而不是路由器组件中定义 headerRight 属性。

function ChatScreen ({ route, navigation }) {

  const { thread } = route.params
  const [messages, setMessages] = useState([]);

  useLayoutEffect(() => {
    const createTwoButtonAlert = () => {
      Alert.alert(
        'Alert Title',
        'My Alert Msg',
        [
          {
            text: 'Cancel',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
          },
          { text: 'OK', onPress: () => console.log('OK Pressed') }
        ]
      );
    };

    navigation.setOptions({
      headerRight: () => (
        <Text onPress={() => createTwoButtonAlert()}>View Profile</Text>
      ),
    });
  }, [navigation]);
}

【讨论】：

【解决方案2】：

您可以在ChatScreen 本身的navigation.setOptions() 的帮助下指定headerRight 属性

function ChatScreen ({ route, navigation }) {
 
 React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Text style={{ paddingEnd: 10 }} onPress={createTwoButtonAlert}>
          View Profile
        </Text>
      ),
    });
  }, [navigation]);

  const createTwoButtonAlert = () =>
    Alert.alert('Alert Title', 'My Alert Msg', [
      {
        text: 'Cancel',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel',
      },
      { text: 'OK', onPress: () => console.log('OK Pressed') },
    ]);

  return (
    //your view
  );
};

查看Live snack

【讨论】：

注意；这可能是指createTwoButtonAlert 函数的陈旧版本。