Я пытаюсь отправить поддержку компоненту внутри Drawer.Screen. Я использую @react-navigation/drawer. Наконец-то я отправляю реквизиты в контейнер навигации, но не могу отправить реквизиты в component = {homeStackScreen} в Drawer.Screen. Как я могу отправить реквизиты в класс homeStackScreen. И это не написано в документации. нужна помощь пожалуйста.
const Drawer = createDrawerNavigator();
<NavigationContainer>
<Drawer.Navigator initialRouteName = "Home">
{props.leftMenu.map((x,index) =>
<Drawer.Screen name = {x.name} key = {index} component = {homeStackScreen} />
)}
</Drawer.Navigator>
</NavigationContainer>
🤔 А знаете ли вы, что...
JavaScript можно использовать для манипуляции DOM (Document Object Model), что позволяет изменять содержимое и структуру веб-страницы.
Вот как вы можете легко передать свойства компонентам из Drawer.Screen, заменив простой компонент из component = {} и заменив его анонимной функцией, которая вернет наш компонент туда, куда нам нужно перейти.
Обычно мы объявляем экран следующим образом:
<Drawer.Screen name = "Home" component = {HomeScreen}/>
чтобы передать свойства компоненту, мы просто сделаем следующую модификацию с помощью анонимной функции и передаем свойства.
Так:
<Drawer.Screen name = "Home" component = {() => <HomeScreen data = {"your_data"}/>}/>
Простой пример:
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName = "Home">
<Drawer.Screen name = "Home" component = {() => <HomeScreen data = {"your_data"}/>}/>
<Drawer.Screen name = "Notifications" component = {NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}}
//.............
function HomeScreen({data}) {
return (
<View>
<Text>{data}</Text>
</View>
);
}
В вашем случае это должно выглядеть примерно так, как показано ниже:
const Drawer = createDrawerNavigator();
<NavigationContainer>
<Drawer.Navigator initialRouteName = "Home">
{props.leftMenu.map((x,index) =>
<Drawer.Screen name = {x.name} key = {index} component = {() => <homeStackScreen data = {x}/>} />
)}
</Drawer.Navigator>
</NavigationContainer>
Аналогичный вопрос для большего: Передача массива состояний из класса в функцию с помощью чистого реагирования
В Drawer.Screen есть реквизит с именем initialParams, указанный в документах навигации React 5.x, для передачи реквизита компоненту. Если вы переходите на новый экран, переданные параметры неглубоко объединяются с исходными параметрами.
Проверьте здесь: https://reactnavigation.org/docs/5.x/screen#initialparams
Используйте это так:
<Drawer.Screen name = "Home" component = {HomeScreen} initialParams = {{data:"your props"}}/>
Я использую этот aproche для передачи реквизита «шрифт»:
в App.js
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen
name = "Home"
component = {HomeScreen}
initialParams = {{ font: TajawalFontFamily }}
/>
</Drawer.Navigator>
</NavigationContainer>
В HomeScreen.js
export default function HomeScreen({ route }) {
const font = route.params.font;
...
Принятый ответ правильный, но он приведет к следующему предупреждению: передача встроенной функции приведет к потере состояния компонента при повторном рендеринге. Это был бы лучший способ передать свойства компоненту:
<Drawer.Screen
name = {'Home'}
>
{(props) => (
<HomeScreen
yourProps = {"yourProps"}
/>
)}
</Drawer.Screen>