Question

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

flutter clean

更新：在屏幕上执行此操作的效果也不佳。

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

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

Answer 2

从您输入的选项来看，我想您可能想在Drawer导航中添加一个Stack。

在下面的示例中，当您转到HomeStack时，它将具有一个导航栏，您可以使用放入的选项对其进行自定义。

（我还在这里创建了一个简单的小吃：https://snack.expo.io/@gie3d/insane-ice-cream）

import React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer, DrawerActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Ionicons } from '@expo/vector-icons';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const HomeStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} options={({navigation}) => ({
      title: "Home",
      headerStyle: {
        backgroundColor: "rgb(0, 145, 234)",
      },
      headerTintColor: "white",
      headerTitleStyle: {
        fontWeight: "bold",
        color: "white",
      },
      headerLeft: () => (
          <Ionicons
            name={'md-menu'}
            size={24}
            style={{ marginLeft: 10 }}
            onPress={() =>
              navigation.dispatch(DrawerActions.toggleDrawer())
            }
          />
        ),
    })} />
  </Stack.Navigator>
);

const Home = () => {
  return (
  <View>
    <Text>This is Home</Text>
  </View>
)}

export default () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="HomeStack">
        <Drawer.Screen name="HomeStack" component={HomeStack} />
        <Drawer.Screen name="HomeNoStack" component={Home} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

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

2 个答案: