Совместное использование параметров навигации для навигатора с несколькими стеками - PullRequest
Новая
       3

Совместное использование параметров навигации для навигатора с несколькими стеками

1 голос
/ 08 мая 2019

При использовании реагировать нативно с реагировать навигации я использую DrawNavigator и несколько StackNavigator. Теперь я хочу определить стиль заголовка (заголовок поставляется со StackNavigator) для StackNavigator только один раз и для всех StackNavigator.

Вот что у меня есть: 

// View1.js

export default StackNav1 = createStackNavigator(
    {
        View1: View1Screen,
        View2: View2Screen
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
            return {
                headerStyle: {
                    backgroundColor: '#9eb9b3',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
                headerLeft: (
                    <Icon style={{ paddingLeft: 10 }} name="bars" size={30}
                        onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                    />
                ),
            }
        }
    }
)

// View2.js

export default StackNav2 = createStackNavigator(
    {
        View3: View3Screen,
        View4: View4Screen
    },
    // here I need to define the style from View1.js again ?!
)

Есть ли более разумное решение, чтобы поделиться внешним видом, чем писать его снова и снова.

Когда приложение масштабируется, у меня, вероятно, будет много StackNavigators, и я хочу, чтобы они имели одинаковый заголовок / внешний вид.

Я ценю ваши мысли!

1 Ответ

1 голос
/ 08 мая 2019

Создать stackNavigatorConfig, который является вторым параметром методов реагирующей навигации. 

stackNavigatorConfig = {
  defaultNavigationOptions: ({ navigation }) => {
    return {
      headerStyle: {
        backgroundColor: '#9eb9b3'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold'
      },
      headerLeft: (
        <Icon
          style={{ paddingLeft: 10 }}
          name="bars"
          size={30}
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        />
      )
    };
  }
};

Затем вы можете использовать его как 

export default StackNav1 = createStackNavigator({
      View1: View1Screen,
      View2: View2Screen
  },
  stackNavigatorConfig);

export default StackNav2 = createStackNavigator({
    View3: View3Screen,
    View4: View4Screen
  },
  stackNavigatorConfig);
...