1

我正在寻找一种方法来为堆栈中的每个屏幕设置自定义标题选项（样式、图标、启用/禁用后退按钮、标题的左右选项），同时为我的应用程序保持多堆栈架构做出反应本国的？这就是我的 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;
4

2 回答 2

3

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

您可以通过组件的setOptions方法传递您想要的任何选项navigation。它将被填充到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值为“橙色”的道具。

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;
    [...]
}

希望它会帮助你，如果不是太晚。

于 2020-06-12T08:38:04.613 回答
0

出色地。您可以在堆栈中隐藏 react-navigation 的标头默认值。

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>

然后，您可以自定义标题组件并将其导入每个屏幕。对不起，因为我的 EL。希望帮助U。

于 2020-04-29T02:45:45.230 回答