Как в React Nativ Drawer запустить Screen с параметром?

В React Native у вас есть возможность использовать библиотеки для создания боковых панелей, таких как react-native-drawer, чтобы добавить выдвигающийся ящик (Drawer) к своему приложению. Если вы хотите запустить экран с параметром, вам понадобится передать этот параметр в компонент Drawer.

Для начала вам нужно установить библиотеку react-native-drawer, выполнив команду:

npm install react-native-drawer --save

После установки вам понадобится импортировать библиотеку в вашем файле с навигацией. Например:

import Drawer from 'react-native-drawer';

Затем вы должны создать компоненты, которые будут служить содержимым вашего Drawer и вашим экраном с параметром. Например:

class DrawerContent extends React.Component {
  render() {
    return (
      <View>
        {/* Ваше содержимое Drawer */}
      </View>
    );
  }
}

class ParamScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { param } = this.props.route.params; // Получаем параметр из пропсов

    return (
      <View>
        {/* Используйте параметр, например: */}
        <Text>Параметр: {param}</Text>
      </View>
    );
  }
}

Затем вам нужно создать компонент навигации, который будет обрабатывать открытие Drawer и перенаправление на экран с параметром. Например:

const AppStack = createStackNavigator(); // Импортируйте createStackNavigator из @react-navigation/stack

class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <AppStack.Navigator>
          <AppStack.Screen
            name="Home"
            component={HomeScreen}
            options={{
              headerLeft: () => (
                <TouchableOpacity
                  onPress={() => this.drawer.open()} // Открываем Drawer по нажатию на кнопку
                >
                  <Icon name="menu" size={24} />
                </TouchableOpacity>
              ),
            }}
          />
        </AppStack.Navigator>

        {/* Drawer */}
        <Drawer
          ref={(ref) => {
            this.drawer = ref; // Сохраняем ссылку на Drawer
          }}
          content={<DrawerContent />} // Устанавливаем содержимое вашего Drawer
          tapToClose={true}
          openDrawerOffset={0.4}
        >
          {/* Навигация и экраны вашего приложения */}
          <AppStack.Screen
            name="ParamScreen"
            component={ParamScreen}
            initialParams={{ param: 'значение параметра' }} // Передаем параметр в компонент ParamScreen
          />
        </Drawer>
      </NavigationContainer>
    );
  }
}

В этом примере мы добавили кнопку в заголовок вашего экрана Home, при нажатии на которую открывается Drawer и добавляется возможность перейти на экран ParamScreen с переданным параметром.

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