React native 如何在React Native中将自定义标题和按钮添加到标题？

我有一个简单的页面，上面有学生名单。一旦我点击每个学生档案，我想进入一个新的页面，页面的标题将是学生的名字，我将在右边有一个按钮。所有这些都应该在标题中完成。所以我写了以下代码：

<Stack.Screen name="Profile" component={ProfileScreen}
                  options={({ route }) => ({ title: route.params.name })}
 /> 

（{title:route.params.name}）
/> 

在页眉上正确显示学生的姓名。然后，我想添加右侧的按钮，如前所述，我将代码更改为：

<Stack.Screen name="Profile" component={ProfileScreen}
                  options={{ headerTitle: ({route}) => ({ title: route.params.name }),
                             headerRight: () => (
                                                <Button
                                                    onPress={() => alert('This is a button!')}
                                                    title="Info"
                                                    color="#fff"
                                                  />),
                          }}
              />

（{title:route.params.name}），
头灯：（）=>(
警报（'这是一个按钮！'）}
title=“Info”
color=“#fff”
/>),
}}
/>

现在我有以下错误：

TypeError:undefined不是对象（评估'route.params'）

---

有人能建议如何添加自定义标题和按钮吗？您必须按如下方式传递它

   options={({ route }) => ({
      title: route.params.name,
      headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="#fff"
        />
      ),
    })}

options={（{route}）=>({
标题：route.params.name，
头灯：（）=>(
警报（'这是一个按钮！'）}
title=“Info”
color=“#fff”
/>
),
})}

您必须按如下方式通过考试

   options={({ route }) => ({
      title: route.params.name,
      headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="#fff"
        />
      ),
    })}

options={（{route}）=>({
标题：route.params.name，
头灯：（）=>(
警报（'这是一个按钮！'）}
title=“Info”
color=“#fff”
/>
),
})}

有两种方法可以设置coustom标头

1.您可以像这样设置自定义按钮

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

---

还可以创建自定义标题并将其导入到任何组件。您可以将道具从每个组件传递到该自定义标题。

有两种方法可以设置自定义标题

1.您可以像这样设置自定义按钮

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

还可以创建自定义标题并将其导入任何组件，您可以将道具从每个组件传递到该自定义标题