Question

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

2021-02-27

897

react-native

我有一个简单的页面，上面有学生名单。一旦我点击每个学生的个人资料，我想转到一个新页面，页面的标题将是学生的姓名，右侧将有一个按钮。所有这些都应该在标题中完成。所以我输入了以下代码：

<Stack.Screen name="Profile" component={ProfileScreen}
                  options={({ route }) => ({ 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"
                                                  />),
                          }}
              />

现在我出现了以下错误： TypeError：undefined 不是对象（评估“route.params”） 有人可以建议如何添加自定义标题和按钮吗？

Answer 1

您必须像下面这样传递它

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

Answer 2

您可以通过两种方法设置自定义标题

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

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>
);
}

您可以通过导航隐藏标题
```
options: {
header: null,
}
```
还可以创建自定义标题并将其导入到任何组件，您可以将每个组件的 props 传递给该自定义标题