如何从导航器导航到底部标签导航器外部的路线

时间:2019-11-06 18:11:43

标签: react-native

我建立了一个底部导航栏,中间有一个按钮。我希望此按钮转到具有全高页面的路由,其中​​没有标题且没有底部栏,并且我从头开始构建此页面。

问题在于propsnavigation没有以某种方式传递,因此我什至在实际使用它们之前都无法控制台记录它们。

我将导航文件本身导入了我的Home文件中,

 <ImageBackground
      style={{ width: "100%", height: "100%" }}
      source={require("./../../assets/images/background.png")}
    >
      <View style={styles.homeStyle}>
        <View style={styles.headerStyle}>
          <Header />
        </View>
          <HomeBottomNav />

      </View>
    </ImageBackground>

这是底部导航栏本身

bottomBarConfig = {
  Summary: {
    screen: Summary,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/home_active.png")
                : require("./../assets/images/home_notactive.png")
            }
            size={25}
          />
        );
      },
      title: "Home"
    }
  },
  Trips: {
    screen: TripsNavigation,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/mytrips_active.png")
                : require("./../assets/images/mytrips_notactive.png")
            }
            size={25}
          />
        );
      },
      title: "My Trips"
    }
  },
  Booking: {
    screen: BookingNavigation,
    navigationOptions: {
      tabBarIcon: ({tintColor}) => {
        return (
        <TouchableOpacity 
        onPress={ () => console.log('How can I navigate to outside route from here') }
        style={{
          height: 90,
          width: 90,
          borderRadius: 100,
          backgroundColor: '#B31F3A',
          paddingTop: 10,
          marginBottom: 10
          }}>
         <Image 
         source={ require('./../assets/images/book.png') }
          size={15}
         />
        </TouchableOpacity> 
        )}, 
      },


  },
  Wallet: {
    screen: Wallet,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/mywallet_active.png")
                : require("./../assets/images/mywallet_notactive.png")
            }
            size={25}
          />
        );
      },
      title: "My credit"
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/more_active.png")
                : require("./../assets/images/more_notactive.png")
            }
            size={25}
          />
        );
      }
    }
  }
};

const TabNavigator = createBottomTabNavigator(bottomBarConfig, {        
});
const App = createAppContainer(TabNavigator);

export default App;

0 个答案:

没有答案