如何在 React Native 中打开选项卡容器内的另一个屏幕？

Question

我正在使用 react-navigation 和 react-navigation-stack 来导航屏幕。我想在选项卡容器内打开另一个屏幕。我该怎么做？

这是我要打开另一个屏幕的屏幕。

import React from 'react';
import { StyleSheet, View} from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button, Text, Icon, Body,Card,CardItem,Right} from 'native-base';

export default class MyEvents extends React.Component {

  option1Click = () => {
    //alert('Press Option1')
    this.props.navigation.navigate('EventView')
  };

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>

<Card primary>
{/* <CardItem header bordered style={{ backgroundColor: 'lightgray' }}> */}
    <CardItem header bordered>
      <Text>Event Name</Text>
    </CardItem>
    <CardItem bordered>
      <Body>
        <Text>
          NativeBase is a free and open source framework that enable
          developers to build
          high-quality mobile apps using React Native iOS and Android
          apps
          with a fusion of ES6.
        </Text>
      </Body>
    </CardItem>
    <CardItem footer bordered footer button onPress={() => this.option1Click()}>
        <Text>View</Text>
        <Right>
                <Icon name="arrow-forward" />
        </Right>
      </CardItem>
  </Card>
      </View>
    );
  }
}

这是我要打开的画面

  import React, { Component } from 'react';
  import { Container, Header, Tab, Tabs, TabHeading, Icon, Text, Content, Left, Button, Body, Right, Title } from 'native-base';
  import ViewEvent from './EventTabs/ViewEvent';
  import Attendance from './EventTabs/Attendance';
  import { Image, TouchableOpacity  } from 'react-native';


  class EventView extends Component {

    option1Click = () => {
      this.props.navigation.navigate('tabContainer')
    };

      render() { 
        const {navigate} = this.props.navigation;
          return ( 

              <Container>

            <Left>
            <Button transparent onPress={() => this.option1Click()}>
              <Icon active name="arrow-back" />
            </Button>
            </Left>
            <Body >
                <Title color='white' >Event Details</Title>
            </Body>

            <Right>

            </Right>
            </Header>
                  <Tabs>
                    <Tab heading={ <TabHeading><Icon name="calendar" /><Text>View Event</Text></TabHeading>}>
                     <ViewEvent />
                    </Tab>
                    <Tab heading={ <TabHeading><Icon name="contact" /><Text>Attendance</Text></TabHeading>}>
                     <Attendance />
                    </Tab>
                   </Tabs>
              </Container>
           );
      }
  }

  export default EventView;

这是我的App.js文件

import Login from './src/login';
import Registration from './src/registration';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import TabContainer from './src/tabContainer';
import EventView from './src/EventView'

const App = createStackNavigator({
  login: {screen: Login,navigationOptions:{headerShown: false}},
  tabContainer: {screen: TabContainer,navigationOptions:{headerShown: false}},
  EventView: {screen: EventView,navigationOptions:{headerShown: false}},
  },
  {
    initialRouteName: 'login',
  }
);
export default createAppContainer(App);

当我单击 Myevents.js 文件中的“查看”按钮时，出现错误。 This is the error I got.

This is my folder Structure.

This is my App design.

如何解决这个错误？

这是我的 Footer Tab Container JS 文件

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Root, Container, Header, Content, Footer, FooterTab, Button, Text, Icon } from 'native-base';
import MyEvents from '../FooterPages/MyEvents';
import JoinEvents from '../FooterPages/JoinEvents';
import CreateEvent from '../FooterPages/CreateEvent';

export default class Tab1 extends React.Component {
  constructor(props) {
   super(props)
   this.state = {
     loading: true,
     index: 0, // tab index
   }
  }

  switchScreen(index) {
     this.setState({index: index})
  }

  render() {
    const { index } = this.state;
    let AppComponent = null;

    if (index == 0) {
      AppComponent = MyEvents
    } else if(index == 1) {
      AppComponent = JoinEvents
    } else if(index == 2) {
      AppComponent = CreateEvent
    }  else {
      AppComponent = Home
    }


    return (
      <Root>
      <Container>
        <Content>
          <AppComponent />
        </Content>
        <Footer>
          <FooterTab>
            <Button vertical active={index === 0} onPress={() => this.switchScreen(0)}>
              <Icon name="apps" />
              <Text>My Events</Text>
            </Button>
            <Button vertical active={index === 1} onPress={() => this.switchScreen(1)}>
              <Icon name="paper" />
              <Text>Join Events</Text>
            </Button>
            <Button vertical active={index === 2} onPress={() => this.switchScreen(2)}>
              <Icon active name="add" />
              <Text>Create Event</Text>
            </Button>

          </FooterTab>
        </Footer>
      </Container>
    </Root>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

After add this.props.navigation.push('EventView'), it give this error.

Answer 1

您可以使用 react-navigation。它提供了一种类型的二次导航。

import { NavigationActions, StackActions } from 'react-navigation';

堆栈导航器：

const AppStack = createStackNavigator({
  Home: Home,
  MapDirection: {
    screen: MapDirectionScreen,
    navigationOptions: {
      headerStyle:{
        elevation:1
      },
      headerLeft: (
        <HeaderBackButton tintColor={colors.colorBlack}
          style={{ color: colors.colorWhite }} onPress={() => {
            NavigationService.goBack()
          }
          } />),
    }
  },
}

this.props.navigation.push('MapDirectionScreen',<pass data>)

switchNavigator:

const Nav = createSwitchNavigator(
  {
    Splash: Splash,
    OnBoarding: OnBoarding,
    Auth: AuthStack,
  },
  {
    // initialRouteName: 'OnBoarding',
    animationType: "none",
    animationEnabled: false,
    swipeEnabled: false
  }
);

this.props.navigation.navigate('OnBoarding')

Answer 2

您需要通过如下导航 tabContainer.js

<Tab1 navigation={this.props.navigation} />

tab1.js

<AppComponent navigation={this.props.navigation} />

比在MyEvents.js

中使用它

option1Click = () => {
    //alert('Press Option1')
    // this.props.navigation.navigate('EventView')
    this.props.navigation.push('EventView')
  };

如何在 React Native 中打开选项卡容器内的另一个屏幕？

How to open another screen inside tab container in react native?

react-native

react-navigation

react-navigation-stack