React Native - 底部选项卡导航器中的标题后退按钮

Question

基本上，我试图在我的应用程序中的注册组件/屏幕的标题中添加一个简单的后退箭头按钮，类似于下图所示的按钮 () 但是，我似乎无法让任何事情发挥作用。我尝试过调整 headerLeft 属性，但我相信这可能与我使用底部选项卡导航器而不是堆栈导航器有关。

下面是有问题的 App.js 代码。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { useState } from 'react';

import Index from './src/Index';
import Signup from './src/Signup';

const Tab = createBottomTabNavigator();

export default function App() {
  const [token, setToken] = useState(null);

  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName={token ? "Home" : "Index"}>
        <Tab.Screen name="Index" component={Index} />
        <Tab.Screen name="Signup" component={Signup} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

我愿意接受任何反馈/建议，因为我现在完全迷失了方向，不知道我的确切问题是什么。

Answer 1

实现自定义后退按钮如下：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer,useNavigation, } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function IndexScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen content</Text>
    </View>
  );
}

function SignupScreen() {

 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text> Signup form here</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();
 
function MyTabs() {
  const {goBack} = useNavigation()

  return (
    <Tab.Navigator screenOptions={({route})=> {

      const isIndex =  route.name === 'Index'
      
      return ({ headerLeft:()=> isIndex ? null : <Text onPress={goBack}> Back </Text> }) }}>
      <Tab.Screen name="Index"  component={IndexScreen} options={{headerShown:false,}} />
      <Tab.Screen name="Signup" component={SignupScreen} options={{headerTitle:"Addresses de livraison"}} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

演示 - https://snack.expo.dev/@emmbyiringiro/bottom-tabs-navigator-%7C-react-navigation