如何使用 react-native-navigation 将 Navigation.push 上的视图从 Tab 更改为 Screen答案

【问题标题】：How can I change my view from Tab to Screen on Navigation.push with react-native-navigation如何使用 react-native-navigation 将 Navigation.push 上的视图从 Tab 更改为 Screen
【发布时间】：2020-01-19 16:13:09
【问题描述】：

我有一个具有三个底部选项卡的屏幕，在其中一个选项卡屏幕中，我想使用 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
            }
        }
    })

}

【问题讨论】：

标签： react-native react-native-navigation

【解决方案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'
                                                }
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }

【讨论】：