react-native - 在反应导航5中组合自定义标题，顶部栏和底部栏

Question

我试图在首次加载屏幕时立即显示 3 元素，但我无法使用打开抽屉的按钮显示标题。

我的导航存储在一个名为Route.js

const TaskTopTab = createMaterialTopTabNavigator();
const Tab        = createMaterialBottomTabNavigator();
const Stack      = createStackNavigator();
const Drawer     = createDrawerNavigator();

function TaskTab() {
  return (
    <TaskTopTab.Navigator>
      <TaskTopTab.Screen name="TodaysTaskScreen" component={TodaysTask} options={{ tabBarLabel: "Today's Task" }} />
      <TaskTopTab.Screen name="PreviousTaskScreen" component={TodaysTask} options={{ tabBarLabel: "Previous Task" }} />
      <TaskTopTab.Screen name="UpcomingTaskScreen" component={TodaysTask} options={{ tabBarLabel: "Upcoming Task" }} />
    </TaskTopTab.Navigator>
  );
}

function BottomTabNav() {
  return (
    <Tab.Navigator 
      activeColor={ Color.default }
      barStyle={{ backgroundColor: Color.white }}>
      <Tab.Screen 
        name="TaskTab" 
        component={TaskTab} 
        options={{
          headerShown: false,
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <AntDesign name="home" color={color} size={26} />
          ),
        }} />
      <Tab.Screen 
        name="HomeScreen" 
        component={Home} 
        options={{
          headerShown: false,
          tabBarLabel: 'Menu',
          tabBarIcon: ({ color }) => (
            <AntDesign name="bars" color={color} size={26} />
          ),
        }} />
    </Tab.Navigator>
  );
}

function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="BottomTabNav" component={BottomTabNav} options={{headerShown: false}} />
    </Drawer.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="AppDrawer" component={AppDrawer} options={{headerShown: true}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

加载的第一个屏幕是TodaysTask屏幕，这是我认为可行的，但标题仍未显示。

export default function Home({ navigation }) {
    navigation.setOptions({
        headerTitle: props => <TextInput {...props} placeholder="bars" placeholderTextColor="#FFFF" style={{
            fontSize: 24
        }} />,
        headerRight: props => <AntDesign {...props} name={'bars'} size={22} color="white" style={{ marginRight: 15 }}></AntDesign>
    });

    return (
        <View>
            <Text>Today's Task</Text>
        </View>
    );
};

我想展示的

我当前的应用程序显示的内容

标签： react-nativereact-navigation-v5