在React Native中如何在屏幕之间导航？

Question

我正在使用React Navigation。我需要从screen1导航到screen2。我创建了标签导航，其中包括一些屏幕但不包括screen1。当我点击screen1上的一个按钮进入screen2时，它应显示在选项卡式屏幕中，它显示错误。

这是screen1（Main.js）

import React, { Component } from 'react';
import {
  ImageBackground,
  StyleSheet,
  Text,
  View,
  Modal
} from 'react-native';
import { Container, Header, Left, Content, Footer, FooterTab, Icon, Grid, Row, Button } from 'native-base';
import TabNav from '../screens/Dashboard';
import { Dashboard } from '../screens/Dashboard';

export default class Main extends Component<{}> {
  render() {
    return (
      <Container>
          <Grid>
            <Row size={2}>
            <View style={{alignItems: 'center', flexDirection: 'column', flex: 1,  justifyContent: 'space-around' }}>
              <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
                <Button style={styles.buttonBrowseStyle} onPress={() => this.props.navigation.navigate('Dashboard')}>
                  <Text>Browse</Text>
                </Button>
              </View>
            </View>
            </Row>
          </Grid>
      </Container>
    );
  }
}

这是screen2（Dashboard.js）

import React from 'react';
import { Text } from 'react-native';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import Post from './Post';

export const Dashboard = () => {
    return (<Text>Dashboard</Text>);
}

const TabNav = TabNavigator ({
    Dashboard: {
      screen: Dashboard,
    },
    Post: {
      screen: Post,
    },
  },
  { 
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: true,
    activeBackgroundColor: 'yellow',
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarIcon: ({focused, tintColor}) => {
      const { routeName } = navigation.state;
      let iconName;
      if(routeName==='Main'){
  
      }
    }
  }
  );
  
export default TabNav;

单击“浏览”按钮时出现此错误。

Answer 1

正如上面提到的答案，你没有在导航中包含主要组件，所以你基本上可以认为他们没有相互联系。

我建议您使用PrimaryNavigator，您可以将其视为主要组件。

const PrimaryNavigator = StackNavigator({
    SignInStack: {
        screen: SignInStackNavigator
    },
    SignUpStack: {
        screen: SignUpStackNavigator
    },
    DrawerMainStack: {
        screen: MenuDrawerStack
    }
},
    {
        headerMode: 'none'
    });

下一步，您可以使用TabNavigator，如下所示。

const MenuDrawerStack = StackNavigator({
    DrawerBar: {
        screen: DrawerBar
    }
}, {
        style: {
            leftDrawerWidth: 40
        },
        index: 0,
        navigationOptions: ({ navigation }) => ({
            headerStyle: { backgroundColor: '#1874CD' },
            gesturesEnabled: false,
            headerLeft: <Icon
                name="menu"
                onPress={() => {
                    navigation.navigate({
                        key: null,
                        index: 0,
                        action: [
                            navigation.navigate('DrawerToggle')
                        ]
                    })
                }}
            />
        }),
    })

最后，您可以构建标签导航器：

const DrawerBar = DrawerNavigator({
    Shop: {
        screen: ShopTabNavigator
    },

}, {
        drawerPosition: 'left',
        headerMode: 'none',
        initialRouteName: 'Shop',
        navigationOptions: ({ navigation }) => ({
            headerStyle: { backgroundColor: 'white' },
        }),
        contentComponent: props => <CustomDrawerMenu {...props} />,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle'
    })

你应该自定义这些，但我想告诉你的是React Native中使用react-navigation导航的方法就像我上面给你看的那样。

作为最后一部分，您必须将PrimaryNavigator作为高阶组件传递给您的应用程序。

export default class Main extends Component<{}> {
  render() {
    return (
      <PrimaryNavigator />
    );
  }
}

Answer 2

Main应该是StackNavigator的一部分。导航道具在Main中不可用，因为它不是任何导航器配置中的屏幕。