如何为每个屏幕创建自定义标题选项，多栈导航react原生？

Question

我正在寻找一种方法来为堆栈中的每个屏幕设置自定义标题选项(样式，图标，启用/禁用后退按钮，标题的左和右选项)，同时在react native中维护我的应用程序的多堆栈架构？这就是我的App.js现在的样子，如果需要的话，我愿意改变它。

const Stack = createStackNavigator();
const App = () => {
  const ref = React.useRef();
  const { getInitialState } = useLinking(ref, {
    prefixes: ['FoodApp://'],
  });

  const AuthStack = createStackNavigator();

  function AuthStackScreen() {
    return (
      <AuthStack.Navigator>
        <AuthStack.Screen name="LogIn" component={LogIn} />
        <AuthStack.Screen name="SignUp" component={SignUp} />
      </AuthStack.Navigator>
    );
  }

  const AppStack = createStackNavigator();

  //I'd like to set different header options for each of the screen here
  function AppStackScreen() {
    return (
      <AppStack.Navigator>
        <AppStack.Screen name="MenuCategoryItems" component={MenuCategoryItems} />
        <AppStack.Screen name="Delivery" component={Delivery} />
        <AppStack.Screen name="Account" component={Account} />
        <AppStack.Screen name="Notification" component={Notification} />
        <AppStack.Screen name="Cart" component={Cart} />
      </AppStack.Navigator>
    );
  }

  //TODO: pass customized bar components
  const Tab = createBottomTabNavigator();

  //I'd like to set different header options for each of the screen here
  function Tabs(){
      return (
          <Tab.Navigator tabBar={props => <BottomMenu {...props} />}>
              <Tab.Screen name="Home" component={Home} />
              <Tab.Screen name="Delivery" component={Delivery} />
              <Tab.Screen name="Account" component={Account} />
              <Tab.Screen name="Notification" component={Notification} />
              <Tab.Screen name="Cart" component={Cart} />
          </Tab.Navigator>
      );
  }

  return (
      <NavigationContainer>
          <Stack.Navigator>
              <Stack.Screen name="Home" component={Tabs} />
              <Stack.Screen name="AppStack" component={AppStackScreen} />
              /*Should I place something else here so that I have access to both AppStack and Tabs navigations?*/
          </Stack.Navigator>
      </NavigationContainer>
  );
};

export default App;

Answer 1

我不确定这是否是你需要的，但下面是我如何为我的header组件定制一些"borderColor“值。

您可以通过navigation组件的setOptions方法传递所需的任何选项。它将填充到scene.descriptor.options参数中。

下面是我如何在我的应用程序中使用它的示例。

屏幕/导航器的header选项。

header: ({scene, previous, navigation}) => {
        const {options} = scene.descriptor;

        let borderColor = options.borderColor ?? 'yellow';

        if (scene.route.name.startsWith('Test')) {
             borderColor = 'blue';
        }

        return <HeaderBar options={options}
                          title={title}
                          previous={true}
                          navigation={navigation}
                          borderColor={borderColor}
        />;
    }

在我可以使用的任何屏幕组件中

useLayoutEffect(() => {
    navigation.setOptions({
        borderColor: 'orange'
    })
}, [ navigation ])

现在，我的<HeaderBar>组件将收到一个属性borderColor，它的值是'orange‘。

export const HeaderBar = ({ options, title, previous, navigation, borderColor = 'yellow' }) => {
    [...]
    console.log(borderColor); // orange
}

正如您所看到的，我的HeaderBar组件还接收作为道具的完整选项，因此我可以跳过borderColor道具，检查header组件本身中的选项。

就像这样

export const HeaderBar = ({ options, title, previous, navigation }) => {
    const { borderColor } = options;
    [...]
}

希望它能帮助你，如果不是太晚的话。

Answer 2

井。你可以在你的堆栈中隐藏react导航的头部默认设置。

function AppStackScreen() {
return (
  <AppStack.Navigator headerMode={'none'}>
    <AppStack.Screen name="MenuCategoryItems" component={MenuCategoryItems} />
    <AppStack.Screen name="Delivery" component={Delivery} />
    <AppStack.Screen name="Account" component={Account} />
    <AppStack.Screen name="Notification" component={Notification} />
    <AppStack.Screen name="Cart" component={Cart} />
  </AppStack.Navigator>

然后，您可以自定义标题组件并将其导入到每个屏幕中。抱歉因为我的艾尔。希望对你有所帮助。