Как открыть еще один экран внутри вкладки контейнера в реагировать родной? - PullRequest
Новая
       5

Как открыть еще один экран внутри вкладки контейнера в реагировать родной?

0 голосов
/ 24 марта 2020

Для навигации по экранам я использую стек реагирования и навигации. Я хотел открыть еще один экран внутри контейнера вкладок. Как я могу это сделать?

Это экран, на котором я хочу открыть другой экран. 

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>
    );
  }
}

Это экран I хочу открыть 

  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;

Это мое приложение. js file 

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 файл это даст мне ошибку. Это ошибка, которую я получил.

Это структура моей папки.

Это мой дизайн приложения.

Как исправить эту ошибку?

Это мой контейнер вкладок нижнего колонтитула 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',
  },
});

После добавления this.props .navigation.pu sh ('EventView'), выдает эту ошибку.

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Вам необходимо пройти навигацию, как показано ниже 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')
  };
0 голосов
/ 24 марта 2020

Вы можете использовать реагировать-навигация . Он обеспечивает два типа навигации: 

import { NavigationActions, StackActions } from 'react-navigation';
  1. stackNavigator: 
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')
...