React Native抽屉式导航屏幕标题和按钮

Question

我正在尝试将标题和按钮添加到从抽屉式导航打开的主屏幕中。以下内容不起作用（屏幕加载但没有标题），我无法找到使用React Navigation v5的文档或示例。我错过了什么？这是我正在关注的doc。

  <Drawer.Screen
      name="Home"
      component={HomeScreen}
      title="Home Screen"
      options={{
        headerRight: () => (
          <Button
            onPress={() => alert("This is a button!")}
            title="Info"
            color="#fff"
          />
        ),
      }}
    />

更新：在屏幕上执行此操作也不起作用。

const HomeScreen = (props) => {
  return (
    <Container>
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen2</Text>
      </View>
    </Container>
  );
};

HomeScreen.navigationOptions = (props) => ({
  title: "Home",
  headerStyle: {
    backgroundColor: "rgb(0, 145, 234)",
  },
  headerTintColor: "white",
  headerTitleStyle: {
    fontWeight: "bold",
    color: "white",
  },
});
export default HomeScreen;

Answer 1

您也需要像这样在屏幕上创建按钮。

import React from "react";
import {Text, View} from 'react-native';

export default class News extends React.Component {



     static navigationOptions = ({navigation}) => {
            return {
                //headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
 headerLeft:(<HeaderBackButton size={20} onPress={()=>{navigation.navigate('Home')}}  color="#fff" tintColor="#fff"/>),
            headerStyle: {
              backgroundColor: 'rgb(0, 145, 234)',
          },
          headerTintColor: 'white',
          headerTitleStyle: 
          {
            fontWeight: 'bold',
            color:'white' ,
            //paddingTop:"2%",
          },  
            }
        }

    render() {

        return (
            <View>
                <Text> Here Leave the News!! </Text>
            </View>
        );
    }
}