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

Question

我正在使用 React 导航。我需要从 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 中不可用，因为它不是任何 Navigator 配置中的屏幕。