Question

因此，我在（app.js）屏幕中创建了一个底部标签导航器，然后尝试在另一个屏幕（settings.js）中创建一个重要的顶部标签导航

在设置中。 js我试图用相同的代码创建导航，但是更短。标签之间的点击速度确实变慢，但滑动效果非常好。然后，我读到您应该将所有导航放到一个文件（app.js）中，这样它才不会变慢。

我的问题是如何将materialtopnavigator和bottomtabnaviagor放在一个文件中，然后将Material标签导航器导出到另一个屏幕，

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>

    );
  }

反应本机使用，在不同页面中创建材料的顶部标签导航器和底部标签栏导航器

1 个答案: