Как передать реквизиты компоненту Screen с помощью навигатора вкладок? - PullRequest
Новая
       41

Как передать реквизиты компоненту Screen с помощью навигатора вкладок?

5 голосов
/ 27 февраля 2020

Это мой первый пост на SO, поэтому прошу прощения, если я не соблюдаю правильный формат. Я создаю свое первое приложение и столкнулся с большой проблемой. Он построен с помощью навигатора вкладок из React Navigation v 5.x.

Я хочу достичь:

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

Я пробовал это https://reactnavigation.org/docs/hello-react-navigation/#passing -additional-props (Я не могу установить реквизиты на пройти вниз)

и это React Native - передать реквизит с одного экрана на другой экран (с помощью навигатора по вкладкам) (устаревшая версия реагирования-навигации)

и это { ссылка } (также старая версия реакции-навигации)

и Redux, но нет доступных примеров с текущей версией реакции навигации.

Я в конце моей веревки с этим и действительно нужно немного шаг за шагом, как этого добиться. Вот примерный набросок того, что я хочу сделать: https://i.stack.imgur.com/rbSCL.png

То, как я думал об этом, - отправка родительского состояния в виде реквизита посредством обратного вызова, но я не могу найти способ отправки реквизита через компоненты экрана в современной версии реагирующей навигации ...

Это мои настройки навигации: 

const Tab = createBottomTabNavigator()

export default class MyApp extends Component{

    constructor(props) {
        super(props);

      }
    render(){
            return (

                   <NavigationContainer>
                        <Tab.Navigator 
                            screenOptions={({ route }) => ({
                            tabBarIcon: ({ focused, color, size }) => {
                                let iconName;

                                if (route.name === 'My tests') {
                                iconName = focused
                                    ? 'ios-list-box'
                                    : 'ios-list';
                                } else if (route.name === 'Testroom') {
                                iconName = focused ? 'ios-body' : 'ios-body';
                                }


                                return <Ionicons name={iconName} size={size} color={color} />;
                            },
                            })}
                            tabBarOptions={{
                            activeTintColor: 'tomato',
                            inactiveTintColor: 'gray',

                            }}
                        >
                            <Tab.Screen name="My tests"  component={MyTests}/> //This is where I want to send props
                            <Tab.Screen name="Testroom" component={TestRoom} />  //This is where I want to send props

                        </Tab.Navigator>
                    </NavigationContainer>

Я прочитал это https://reactnavigation.org/docs/redux-integration но это не имеет смысла для меня. Как это вписывается в дерево компонентов? Что идет куда? Пожалуйста, помогите!

1 Ответ

0 голосов

Чтобы отправить реквизит компоненту <MyTests />, внутри <Tab.Screen />: 

<Tab.Screen name="My tests">
  {() => <MyTests myPropsName={myPropsValue} />}
</Tab.Screen>
...