ScrollableTabView in React Native, the ScrollableTabView navigation bar still exists on the page after the redirect. The solution is as follows:

The wrong sample

ScrollableTabView is placed into each TAB display page. The page with the jump function is directly wrapped with Navigator, resulting in the navigation bar at the bottom after jumping to other pages.

render() {
        let tabNames = this.state.tabNames;
        let tabIconNames = this.state.tabIconNames;
        return (
            <ScrollableTabView         
                renderTabBar={() => <DfyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
                tabBarPosition='bottom'           
                locked={true}
                initialPage={0}
                prerenderingSiblingsNumber={1}
            >

                <Navigator
                    tabLabel="list"
                    initialRoute={{ name: 'list', component: List }}
                    // Configure the scenario
                    configureScene=
                        {
                            (route) => {
                                return ({
                                    ...Navigator.SceneConfigs.PushFromRight,
                                    gestures: null
                                });
                            }
                        }
                    renderScene={
                        (route, navigator) =>
                        {
                            let Component = route.component;
                            return<Component {... route.params} navigator={navigator} /> } } /> <Edit tabLabel="edit" />
                <Picture tabLabel="pic" />
                <Account tabLabel="account"/>

            </ScrollableTabView>
        );
    }Copy the code

The solution

Custom TabBar components

Add a TAB page to a component that has a jump function without passing in an attribute {… this.props}

   render() {
        let tabNames = this.state.tabNames;
        let tabIconNames = this.state.tabIconNames;
        return (
            <ScrollableTabView
                // renderTabBar={() => <ScrollableTabBar/>}
                renderTabBar={() => <DfyTabBar tabNames={tabNames} tabIconNames={tabIconNames} />}
                tabBarPosition='bottom'
                locked={false}
                initialPage={0}
                prerenderingSiblingsNumber={1}
            >

                <List tabLabel="list"  {...this.props} />
                <Edit tabLabel="edit" />
                <Picture tabLabel="pic" />
                <Account tabLabel="account" />

            </ScrollableTabView>
        );
    }Copy the code

Put the TabBar directly into the Navigator

 return (
            <Navigator
                {...this.props}
                initialRoute={{ name: 'TabBarView', component: TabBarView }}
                // Configure the scenario
                configureScene=
                {
                    (route) => {
                        return ({
                            ...Navigator.SceneConfigs.PushFromRight,
                            gestures: null
                        });
                    }
                }
                renderScene={
                    (route, navigator) => {
                        let Component = route.component;
                        return<Component {... route.params} navigator={navigator} /> } } /> );Copy the code

conclusion

If you wrap the Navigator around a TAB page, only the page jumps, so the bottom navigation bar still exists. So wrap the entire TabBar component directly with the Navigator.