在抽屉导航屏幕上反应本机显示标题和后退按钮

时间:2020-09-28 17:16:08

标签: javascript reactjs react-native react-navigation

我只是添加了抽屉式导航并且运行良好,但是在选项中没有显示为Stack的标题。

我创建了一些屏幕示例,并在同一文件中使用了Tapbar,堆栈和抽屉。+

我在一些YouTube上进行了搜索,没有具体说明

谢谢。

您可以看到我当前的应用程序:GIF HERE

HomeStack

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />

      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

抽屉


const Drawer = createDrawerNavigator();

const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={MainScreen} />
        <Drawer.Screen
          name="Leaderboards"
          component={Leaderboards}
          options={{
            drawerIcon: (config) => <AntDesign size={23} name="user" />,
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
````

1 个答案:

答案 0 :(得分:1)

抽屉屏幕没有标题选项。您可以为排行榜屏幕制作自己的标题组件,也可以在抽屉式屏幕中嵌套一个包含排行榜屏幕的堆栈导航器,然后通过options属性自定义标题。