我如何在带有react-native-navigation的Navigation.push上将视图从选项卡更改为屏幕

Question

我有一个带有三个底部标签的屏幕，在其中一个标签屏幕中，我想使用Navigation.push移至一个全新的页面，但是它不起作用。请任何可以帮助从基于选项卡的视图切换到推屏（没有选项卡。我想是堆栈）的人]

下面是我的navigator.js文件，其中包含用于在登录时切换到选项卡视图的初始逻辑

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]
                                }
                            }
                        }
                    }
                ]
            }
        }
    })
  })
 }

以下是我用来调用标签逻辑的虚拟登录页面

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>
     )
}

下面是我试图用来推送无法正常工作的新屏幕的代码

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

解决了！问题在于我如何在主Navigation.js文件中设置根目录。我做得不好。

这是这里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'
                                                }
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }