Как я могу изменить свой вид с вкладки на экран в Navigation.pu sh с реагировать на родную навигацию

Question

У меня есть экран с тремя нижними вкладками, на одном из экранов вкладок я хочу перейти на совершенно новую страницу с помощью Navigation.pu sh, но он не работает. Пожалуйста, кто-нибудь, кто может помочь с переключением с представления на основе вкладок на экран pu sh (на котором нет вкладок. Я думаю, стек)

ниже - это мой навигатор. js файл, содержащий начальные логики c для переключения на просмотр вкладок при входе в систему

Navigation.registerComponentWithRedux('HomeScreen', ()=> Home, Provider, store)
Navigation.registerComponentWithRedux('FindPlace', ()=> FindPlace, Provider, store)
Navigation.registerComponentWithRedux('SharePlace', ()=> SharePlace, Provider, store)
Navigation.registerComponent('PlaceDetailScreen', ()=> PlaceDetailScreen);

export const startNavigation = () => {
 Promise.all([
    Icon.getImageSource('ios-search', 30),
    Icon.getImageSource('md-share', 30, 'blue'),
    Icon.getImageSource('ios-home', 30, 'darkblue'),
 ]).then(icons => {
    Navigation.setRoot({
        root: {
            bottomTabs: {
                children: [
                    {
                        component: {
                            name: 'HomeScreen',
                            options: {
                                bottomTab: {
                                    text: 'Home',
                                    fontSize: 10,
                                    icon: icons[2]
                                }
                            }
                        }
                    },
                    {
                        component: {
                            name: 'FindPlace',
                            options: {
                                bottomTab: {
                                    text: 'Find a Place',
                                    fontSize: 10,
                                    icon: icons[0]
                                }
                            },
                            passProps: {
                                data: 'Data'
                            }
                        }
                    },
                    {
                        component: {
                            name: 'SharePlace',
                            options: {
                                bottomTab: {
                                    text: 'Share Place',
                                    fontSize: 10,
                                    icon: icons[1]
                                }
                            }
                        }
                    }
                ]
            }
        }
    })
  })
 }

ниже - моя фиктивная страница входа, которую я использую для вызова логов вкладок c

import {startNavigation} from '../../../navigation';

const AuthScreen = props=> {
 const navigateTabs = () => {
    startNavigation()
 }
  return (
    <View style={styles.authScreen}>
        <TextInput placeholder='Username'/>
        <Button title='Log me in' color='green' onPress={navigateTabs}/>
    </View>
     )
}

ниже код, который я пытаюсь использовать для pu sh новый экран, который не работает

const handleItemSelect = key => {

const selPlaces = places.places.find(item => item.key === key);

    Navigation.push(props.componentId, {
        component: {
            name: 'PlaceDetailScreen',
            options: {
                topBar: {
                    visible: true,
                    title: {
                        text: selPlaces.name
                    }
                }
            },
            passProps: {
                selectedPlace: selPlaces
            }
        }
    })

}

Answer 1

Решено! проблема была в том, как я устанавливал root в моей основной навигации. js файл. Я не делал это правильно.

вот обновленный root, как указано здесь https://wix.github.io/react-native-navigation/# / docs / top-level-api? Id = setrootlayout

bottomTabs: {
                        children: [
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                name: 'HomeScreen',
                                                options: {
                                                    bottomTab: {
                                                        text: 'Home',
                                                        fontSize: 10,
                                                        icon: icons[2]
                                                    },
                                                    topBar: {
                                                        visible: true,
                                                        leftButtons: [
                                                            {
                                                                id: 'sideMenu',
                                                                icon: icons[3]
                                                            }
                                                        ],
                                                        noBorder: true
                                                    }
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                name: 'FindPlace',
                                                options: {
                                                    bottomTab: {
                                                        text: 'Find a Place',
                                                        fontSize: 10,
                                                        icon: icons[0]
                                                    },
                                                    topBar: {
                                                        leftButtons: [
                                                            {
                                                                id: 'sideMenu',
                                                                icon: icons[3]
                                                            }
                                                        ],
                                                        noBorder: true
                                                    }
                                                },
                                                passProps: {
                                                    data: 'Data'
                                                }
                                            }
                                        },
                                    ]
                                }
                            },
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                name: 'SharePlace',
                                                options: {
                                                    bottomTab: {
                                                        text: 'Share Place',
                                                        fontSize: 10,
                                                        icon: icons[1]
                                                    },
                                                    topBar: {
                                                        leftButtons: [
                                                            {
                                                                id: 'sideMenu',
                                                                icon: icons[3]
                                                            }
                                                        ],
                                                        noBorder: true
                                                    }
                                                },
                                                passProps: {
                                                    data: 'data'
                                                }
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }