React native 如何为每个屏幕创建自定义标题选项多堆栈导航？_React Native_React Navigation_React Native Navigation_React Navigation Stack_React Navigation Bottom Tab

React native 如何为每个屏幕创建自定义标题选项多堆栈导航？

react-native

React native 如何为每个屏幕创建自定义标题选项多堆栈导航？,react-native,react-navigation,react-native-navigation,react-navigation-stack,react-navigation-bottom-tab,React Native,React Navigation,React Native Navigation,React Navigation Stack,React Navigation Bottom Tab,我正在寻找一种方法来为堆栈中的每个屏幕设置自定义标题选项（样式、图标、启用/禁用后退按钮、标题的左右选项），同时在react native中为我的应用程序维护多堆栈体系结构？这就是我的App.js现在的样子，如果需要，我愿意更改它 const Stack = createStackNavigator(); const App = () => { const ref = React.useRef(); const { getInitialState } = useLinking(r

我正在寻找一种方法来为堆栈中的每个屏幕设置自定义标题选项（样式、图标、启用/禁用后退按钮、标题的左右选项），同时在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;

const Stack=createStackNavigator（）；
常量应用=（）=>{
const ref=React.useRef（）；
const{getInitialState}=useLinking（参考{
前缀：['FoodApp://'，
});
const AuthStack=createStackNavigator（）；
函数AuthStackScreen（）{
返回(
);
}
const AppStack=createStackNavigator（）；
//我想在这里为每个屏幕设置不同的标题选项
函数AppStackScreen（）{
返回(
);
}
//TODO:传递自定义条组件
const Tab=createBottomTabNavigator（）；
//我想在这里为每个屏幕设置不同的标题选项
函数选项卡（）{
返回(
}>
);
}
返回(
/*我是否应该在此处放置其他内容，以便可以访问AppStack和选项卡导航*/
);
};
导出默认应用程序；

很好。您可以在堆栈中隐藏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>

函数AppStackScreen（）{
返回(

然后，您可以自定义标题组件并将其导入到屏幕的每个页面中。

很抱歉，因为我的EL.hope可以很好地帮助您。

您可以在堆栈中隐藏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>

函数AppStackScreen（）{
返回(

然后，您可以自定义标题组件并将其导入到屏幕的每个页面中。

很抱歉，我的EL.hope帮助您。

不确定这是否是您所需要的，但下面是我如何为我的标题组件自定义一些“borderColor”值

您可以通过

navigation

组件的

setOptions

方法传递所需的任何选项。它将填充在

场景描述符.options

参数中

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

我的屏幕/导航器的

标题

选项

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

现在，我的

组件将收到一个属性

borderColor

，其值为“橙色”

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

如您所见，我的

HeaderBar

组件也将完整选项作为道具接收，因此我可以跳过

borderColor

道具，并检查标题组件内部的选项

像这样

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

如果不是太晚，希望它能帮助您。