Question

我在使用react-navigation时遇到了一些问题。

我的导航路线：

StackNavigator: main app navigation
-- WelcomeScreen
-- GuideScreen 
-- TabNavigator: this is CustomTabs
 + MyHomeScreen
 + MyNotificationsScreen 
 + MySettingsScreen
-- OtherScreen.

我使用createNavigator，createNavigationContainer来构建我自己的Navigation。您可以在此处查看实时自定义标签：https://snack.expo.io/rJnUK4nrZ

import React from 'react';
import {
  Button,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  createNavigator,
  createNavigationContainer,
  TabRouter,
  addNavigationHelpers,
} from 'react-navigation'; // 1.0.0-beta.11

const SampleText = ({ children }) => (
  <Text style={styles.sampleText}>{children}</Text>
);

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <SampleText>{banner}</SampleText>
    <Button
      onPress={() => {
        navigation.goBack(null);
      }}
      title="Go back"
    />
  </ScrollView>
);

const MyHomeScreen = ({ navigation }) => (
  <MyNavScreen banner="Home Screen" navigation={navigation} />
);

const MyNotificationsScreen = ({ navigation }) => (
  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
);

const MySettingsScreen = ({ navigation }) => (
  <MyNavScreen banner="Settings Screen" navigation={navigation} />
);

const CustomTabBar = ({ navigation }) => {
  const { routes } = navigation.state;
  return (
    <View style={styles.tabContainer}>
      {routes.map(route => (
        <TouchableOpacity
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text>{route.routeName}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <View style={styles.container}>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
    </View>
  );
};

const CustomTabRouter = TabRouter(
  {
    Home: {
      screen: MyHomeScreen,
      path: '',
    },
    Notifications: {
      screen: MyNotificationsScreen,
      path: 'notifications',
    },
    Settings: {
      screen: MySettingsScreen,
      path: 'settings',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Home',
  }
);

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
);

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  tabContainer: {
    flexDirection: 'row',
    height: 48,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
  },
  sampleText: {
    margin: 14,
  },
});

export default CustomTabs;

在App.js

中

import { connect } from "react-redux";
import { addNavigationHelpers, StackNavigator } from "react-navigation";
import Welcome from "@components/WelcomeScreen";
import Welcome from "@components/GuideScreen";
import Welcome from "@components/OtherScreen";

// import CustomTabs 

export const AppNavigator = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Guide: { screen: GuideScreen },
    Home: { screen: CustomTabs }, // I want to use CustomTabs TabNavigation here?
    Other: { screen: OtherScreen },
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);

const Routes= ({ dispatch, nav }) => (
  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
);

const mapStateToProps = state => ({
  nav: state.nav
});

const mapDispatchToProps = dispatch => ({
  dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(AppWithNavigationState);

如何将自定义TabNavigator添加到主StackNavigator？

我做错了什么？该应用程序与redux，saga集成。如果您有关于自定义堆栈和使用react-navigation的选项卡的其他示例，请给我参考。

Answer 1

更新您的代码：

import Tab1Screen from "@components/Tab1Screen" 
import Tab2Screen from "@components/Tab2Screen" 
export const AppNavigator = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Guide: { screen: GuideScreen },
    Home: { 
        screen: TabNavigator(
             {
               Tab1Screen: {screen: Tab1Screen},
               Tab2Screen: {screen: Tab2Screen}
             },{
                tabBarPosition: "bottom"
             })
    }, 
    Other: { screen: OtherScreen },
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);

Answer 2

我们可以访问StackNavigtion内的TabNavigation

导入文件

import SampleHeadersScreen from "../Containers/SampleHeadersScreen";
import SampleHeaders1Screen from "../Containers/SampleHeaders1Screen";
import SampleHeaders3Screen from "../Containers/SampleHeaders3Screen";
import SampleHeaders8Screen from "../Containers/SampleHeaders8Screen";
import SampleHeaders9Screen from "../Containers/SampleHeaders9Screen";

const TabSegment = TabNavigator(
  {
    SegmentBarScreen: {
      screen: SampleHeaders8Screen,
      navigationOptions: {
        title: "Album"
      }
    },
    SegmentBarScreen1: {
      screen: SampleHeaders9Screen,
      navigationOptions: {
        title: "Other"
      }
    }
  })
const PrimaryNav = StackNavigator(
  {
    LaunchScreen: { screen: LaunchScreen },
    SampleHeadersScreen: { screen: SampleHeadersScreen },
    SampleHeaders1Screen: { screen: SampleHeaders1Screen },
    SampleHeaders3Screen: { screen: SampleHeaders3Screen },
//TabNavigaion
    SampleSegmentTab: { screen: TabSegment },

  })

在堆栈nativion 旁边添加 TabSegment 。它运作良好。我希望它会对你有所帮助。

如何在react-navigation中使用自定义TabNavigator和StackNavigator

2 个答案: