Параметры навигации по совместному использованию стека реакции-навигации

Я пытаюсь использовать StackNavigator и хочу использовать ту же навигацию на других экранах.

Моя конфигурация:

  • Экспо версия: 3.0.10
  • "реагировать-навигация": "^4.3.6",
  • "реагировать-навигация-стек": "^ 2.3.10"

In my Navigation.js:

import { createAppContainer } from 'react-navigation'
import { createStackNavigator} from 'react-navigation-stack'
import Step1 from '../Components/Steps/Step1'
import Step2 from '../Components/Steps/Step2'

const StepsStackNavigator = createStackNavigator({
  Step1: {
      screen: Step1,
      navigationOptions: {
      title: 'Etape 1',
    }},
  Step2: {
      screen: Step2,
    navigationOptions: {
      title: 'Step2'
    }
  }
})

export default createAppContainer(StepsStackNavigator)

Вот реквизит, которым я хочу поделиться, но я хочу сохранить заголовок для каждого экрана.

 headerStyle: {backgroundColor: 'rgba(255, 255, 0, 0.7)'},
 headerTintColor: 'black',
 headerTitleStyle: {fontWeight: 'bold'}

Кто-нибудь может мне помочь, пожалуйста!


react-native react-navigation react-navigation-stack
person Rid Scott Marinette    schedule 02.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это хороший пример того, как я настроил навигатор стека в настоящее время, ваши параметры были вставлены.

const MainStackNavigator = createStackNavigator({
  Step1: {
    screen: Step1,
    navigationOptions: {
      title: 'Etape 1'
    }
  },
  Step2: {
    screen: Step2,
    navigationOptions: {
      title: 'Step2'
    }
  }
}, {
  headerStyle: {backgroundColor: 'rgba(255, 255, 0, 0.7)'},
  headerTintColor: 'black',
  headerTitleStyle: {fontWeight: 'bold'}
});

const AppNav = createAppContainer(MainStackNavigator);

export default AppNav;

Если у вас установлен intellisense, можно нажать cmd на импорт createStackNavigator и просмотреть параметры, которые он принимает, в частности, второй аргумент. Cmd, щелкнув любой из них, приведет вас к объявлению и покажет вам доступные параметры конфигурации.

person t_killah    schedule 02.04.2020
comment
Спасибо за Ваш быстрый ответ. Но я новичок в JS и реагирую как родной, поэтому я не понимаю, как использовать его с моей навигацией для Шага 1 и Шага 2. - person Rid Scott Marinette; 02.04.2020
comment
Обновлено для ясности: файл ./routes просто экспортировал объект. - person t_killah; 02.04.2020
comment
createStackNavigator — это просто функция, которая принимает 2 аргумента, первый из которых — объект, содержащий ваши маршруты, а второй — объект с вашими параметрами навигации. - person t_killah; 02.04.2020
comment
Теперь я понимаю, что вы сделали, приложение запускается, и я могу перемещаться по своим экранам, но когда я пробую ваш код, он не принимает аргумент 2, который содержит headerStyle, headerTintColor, headerTitleStyle, однако заголовок в первом аргументе изменяется - person Rid Scott Marinette; 02.04.2020