React Navigation несколько конфигураций стека

У меня есть DrawerNavigator с несколькими страницами, каждая из этих страниц является собственным StackNavigator, это означает, что у меня есть конфигурация стека для каждого стека. например

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
},
{
  headerLayoutPreset: "center",
  headerMode: "float",
  defaultNavigationOptions: {
    headerTintColor: "#fff",
    headerLayoutPreset: "center",
    headerStyle: {
      backgroundColor: "#333",
    },
    headerTitleStyle: {
      fontSize: 18
    },
  }
})

У меня в ящике есть по одному на каждую страницу.

Все эти конфигурации стека одинаковы. Есть ли способ передать эту конфигурацию стека в моем коде только один раз?


react-native react-navigation react-navigation-drawer react-navigation-stack
person LuizfBrisighello    schedule 26.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поместите свою общую конфигурацию в файл, а затем импортируйте и используйте там, где это необходимо.

Да, насколько мне известно, для каждого стека вы должны определить свою индивидуальную конфигурацию.


// defaultStackConfig.js
export const defaultConfig = {
  headerLayoutPreset: "center",
  headerMode: "float",
  defaultNavigationOptions: {
    headerTintColor: "#fff",
    headerLayoutPreset: "center",
    headerStyle: {
      backgroundColor: "#333",
    },
    headerTitleStyle: {
      fontSize: 18
    },
  }
}


// Stack1.js

import {defaultConfig} from './defaultConfig'

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
}, defaultConfig)

// or with some custom mode

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
}, { ...defaultConfig, ...{ headerMode: "float" })
person Pedro Henrique    schedule 27.08.2019
comment
Спасибо за понимание! Теперь обслуживание будет проще - person LuizfBrisighello; 28.08.2019