反应原生使用在不同页面中创建材料顶部选项卡导航器和底部选项卡栏导航器

Question

所以我在App.js 屏幕中创建了一个底部标签导航器，并尝试在另一个屏幕settings.js 中创建一个材质顶部标签导航

在settings.js 中，我尝试使用相同的代码创建一个导航但更短。选项卡之间的点击变得非常缓慢，但滑动效果很好。然后我读到您应该将所有导航放在一个文件中 (App.js)，这样它就不会变慢。

我的问题是如何将MaterialTopTabNavigator 和BottomTabNavigator 放在一个文件中，然后将MaterialTopTabNavigator 导出到另一个屏幕？

settings.js

const settingsTabs = creatematerialtopTabNavigator ({
          Home:{
            screen: Home,
            navigationOptions:{
              tabBarIcon: ({ focused, tintcolor }) => (
                <Icon name="ios-home" size={24}  />
              )
            }
          },
          Inbox:{screen: Inbox,
            navigationOptions:{
              tabBarIcon: ({ tintcolor }) => (
                <Icon name="ios-mail" size={24} />
              )
            }
          },

App.js

import {createBottomTabNavigator} from 'react-navigation'
        import Icon from 'react-native-vector-icons/Ionicons'
       
        const Tabs = createBottomTabNavigator ({
          Home:{
            screen: Home,
            navigationOptions:{
              tabBarIcon: ({ focused, tintcolor }) => (
                <Icon name="ios-home" size={24}  />
              )
            }
          },
          Inbox:{screen: Inbox,
            navigationOptions:{
              tabBarIcon: ({ tintcolor }) => (
                <Icon name="ios-mail" size={24} />
              )
            }
          },
          Search:{screen: Search,
            navigationOptions:{
              tabBarIcon: ({ tintcolor }) => (
                <Icon name="ios-search" size={24} />
              )
            }
          },
          Favorites:{screen: Favorites,
            navigationOptions:{ 
            tabBarIcon: ({ tintcolor }) => (
              <Icon name="ios-heart" size={24} />
            )
          }
          },
          Settings:{screen: Settings,
            navigationOptions:{ 
              tabBarIcon: ({ tintcolor }) => (
                <Icon name="ios-settings" size={24} />
              )
            }
          }
        
        }
        });
        
        
        
        export default class App extends Component {
          render() {
        
            return <Tabs />
          }
        }

Answer 1

您可以在单个文件中创建组件，比如 helper.js，然后在导出函数中返回该组件。然后导入你想要的函数并渲染它任何文件。

Helper.js

const settingsTabs = creatematerialtopTabNavigator ({
      Home:{
        screen: Home,
        navigationOptions:{
          tabBarIcon: ({ focused, tintcolor }) => (
            <Icon name="ios-home" size={24}  />
          )
        }
      },
      Inbox:{screen: Inbox,
        navigationOptions:{
          tabBarIcon: ({ tintcolor }) => (
            <Icon name="ios-mail" size={24} />
          )
        }
      },
});

export function Tabs(){
  return (
      <settingsTabs />
  )
}

App.js

import { Tabs } from './Helper'

render() {
    return (
      <View style={{flex:1}}>
        <Tabs />
      </View>

    );
  }