Question

如何从tabview的孩子那里调用this.props.navigate("View")之类的“导航”功能？

我有App.js存储我的react-navigation-drawer设置，HomeScreen.js，其tabview包含Test.js. 我运行OnPress函数时总是说like this，这是我的App.js代码

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image
} from "react-native";

//library imports
import { Container, Content, Icon, Header, Body } from 'native-base'
import { DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView } from 'react-navigation'

//custom files
//import AppStackNavigator from './AppStackNavigator'
import SettingsScreen from "./SettingsScreen"
import HomeScreen from "./HomeScreen"
import About from "./About"
import Outlet from "./Outlet"
import Package from "./Package"
import BufetMenu from "./BufetMenu"
import SetMenu from './SetMenu'
import Menus from './Menus'
import News from './News'
import SisterCompany from './SisterCompany'
import ContactUs from './ContactUs'
import Recomended from './Recomended'
import Test from './Test'


export default class App extends React.Component {
  render() {
    return (
      <MyApp/>
    );
  }
}

const CustomDrawerContentComponent = (props) => (
  <Container>
    <Header style={styles.drawerHeader}>
      <Body>
        <Image
          style={styles.drawerImage}
          source={require('./assets/img/bebek-bengil.jpg')} />
      </Body>
    </Header>
    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>
);

const MyApp = DrawerNavigator({

  // For each screen that you can navigate to, create a new entry like this:
  Home: {
    screen: HomeScreen,
  },
  About: {
    screen: About
  },
  Uoutlet: {
    screen: Outlet
  },
  Package: {
    screen: Package
  },
  BufetMenu: {
    screen: BufetMenu,
    navigationOptions: {
        drawerLabel: () => null
    }
  },
  SetMenu: {
    screen: SetMenu,
    navigationOptions: {
        drawerLabel: () => null
    }
  },
  Menus: {
    screen: Menus
  },
  News: {
    screen: News
  },
  SisterCompany: {
    screen: SisterCompany
  },
  ContactUs: {
    screen: ContactUs
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
        drawerLabel: () => null
    }
  },
  Recomended: {
    screen: Recomended
  },
  Test: {
    screen: Test
  }
},
  {
    initialRouteName: 'Home',
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    drawerBackgroundColor: "white"
  });


const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  drawerHeader: {
    height: 200,
    backgroundColor: 'white'
  },
  drawerImage: {
    height: 155,
    width: 230,
    //borderRadius: 75
  }

})

这是我的HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {DrawerNavigator} from 'react-navigation'
import {Container, Header, Button, Icon, Title, Left, Body, Right, Content, Footer, FooterTab, Tabs, Tab} from 'native-base'

import CustomHeader from './Components/CustomHeader'
import SwipeableParallaxCarousel from 'react-native-swipeable-parallax-carousel'

import Recomended from './Recomended'
import OutletTab from './OutletTab'
import Promotion from './Promotion'
import BufetMenu from './BufetMenu'
import Test from './Test'

const datacarousel = [
  {"id":74,"imagePath":"http:\/\/bebekbengil.co.id\/assets\/front\/images\/bebek-bengil-promotion-at-bebek-bengil-abP.jpeg"},{"id":76,"imagePath":"http:\/\/bebekbengil.co.id\/assets\/front\/images\/bebek-bengil-promotion2-at-bebek-bengil-aQK.jpeg"},{"id":78,"imagePath":"http:\/\/bebekbengil.co.id\/assets\/front\/images\/bebek-bengil-promotion3-at-bebek-bengil-Cjr.jpeg"}
];

export default class HomeScreen extends React.Component {
  constructor(){
    super();
    this.state = {
      nama:"bondan noviada",
      asal:"desa bungkulan",
      headingOne : "Recomended"
    }
  }
  goToContactUs(){
    this.props.navigation.navigate("ContactUs");
  }
  goToBufetMenu(){
    this.props.navigation.navigate("BufetMenu");
  }
  render() {
    return (
      <Container>
      <Header>
         <Left>
           <Button transparent onPress={()=>this.props.navigation.navigate('DrawerOpen')}>
             <Icon name='menu' style={{color: '#a95892'}} />
           </Button>
         </Left>
         <Body>
           <Title style={{color: '#a95892'}}>Bebek Bengil</Title>
         </Body>
         <Right>
           <Button transparent>
             <Icon style={{color: '#a95892'}} name='settings' onPress={()=>{this.goToBufetMenu()}} />
           </Button>
         </Right>
       </Header>
        <Content>
          <SwipeableParallaxCarousel
            data={datacarousel}
          />
        <Tabs style={styles.tab} initialPage={0}>
            <Tab heading={this.state.headingOne}>
              <Test />
            </Tab>
            <Tab heading="Promotion">
              <Promotion />
            </Tab>
            <Tab heading="Outlet">
              <OutletTab />
            </Tab>
          </Tabs>
        </Content>
        <Footer style={styles.footer}>
              <FooterTab>
                <Button>
                    <Text style={styles.buttonText} onPress={()=>{this.goToContactUs()}}>Reservation</Text>
                </Button>
              </FooterTab>
            </Footer>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  footer:{
    backgroundColor: '#a95892',
  },
  buttonText: {
    color: '#ffffff',
    textAlign: 'center',
    fontStyle: 'normal',
    fontSize : 20
  },
  tab: {
    backgroundColor: 'red',
  },
});

这是在我的HomeScreen.js

中的tabview中调用的Test.js

import React from 'react';
import { StyleSheet, Text, View, WebView, TouchableOpacity, Alert } from 'react-native';
import { DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView } from 'react-navigation'
import {Container, Header, Button, Icon, Title, Left, Body, Right, Content} from 'native-base'

import HomeScreen from "./HomeScreen"
import About from "./About"
import BufetMenu from "./BufetMenu"

export default class Test extends React.Component {
  deva(){
    Alert.alert("deva function");
  }

  navigator(){
   this.props.navigation.navigate("BufetMenu");
  }
  render() {
    return (
      <Container>
        <Content>
          <View syile={styles.container}>
            <Text style={styles.container} onPress={()=>{this.navigator()}}>test screen</Text>
          </View>
        </Content>

      </Container>
    );

  }
}







const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

在 HomeScreen.js 中，将导航传递给Test。

你在哪里使用它：

<Test />

执行：

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

从tabview child调用导航功能

1 个答案: