App.js

import { Platform } from "react-native";
import { Root } from "native-base";
import { StackNavigator, TabNavigator } from "react-navigation";

import Drawer from "./Drawer";
import Homepage from "./main_scenes/main";
import Splashscreen from "./main_scenes/home/";
import LoginScene from "./main_scenes/home/login/";

import RegisterScene from "./main_scenes/home/register/";
import InsertPhoneCode from "./main_scenes/home/pin/";
import MyResults from "./main_scenes/results/";
import MyMap from "./main_scenes/results/map/";
import UserDetails from "./main_scenes/profile/";

import MyResultsByDistance from "./main_scenes/results/Distance"
import MyResultsByAvis from "./main_scenes/results/Avis"

import Test from "./main_scenes/tab"


const AppNavigator = StackNavigator(
    {
        Drawer: { screen: Drawer },

        RegisterScene: {screen : RegisterScene},
        Splashscreen:{ screen : Splashscreen},
        Homepage:{ screen : Homepage},
        InsertPhoneCode:{screen:InsertPhoneCode},
        LoginScene: {screen : LoginScene},
        MyResults: {screen:MyResults},
        MyMap:{screen:MyMap},
        UserDetails:{screen:UserDetails},

        MyResultsByDistance:{screen:MyResultsByDistance},
        MyResultsByAvis:{screen:MyResultsByAvis},

    },
    {
        initialRouteName: "Splashscreen",
        headerMode: "none",
    }
);
export default () =>
    <Root>
        <AppNavigator />
    </Root>;

我正在使用Nativebase框架的Tabs功能。然后，我创建了一个index.js，我在这里定义了所有标签：

index.js

import React, { Component } from "react";
import {Dimensions, AppRegistry, StyleSheet, 
  ListView, ScrollView,View,Image,TouchableOpacity,AsyncStorage, Alert} from 'react-native';

import {
  Container,
  Header,
  Title,
  Button,
  Icon,
  Tabs,
  Tab,
  Text,
  Right,
  Left,
  Body,
  TabHeading,
    Footer,
  FooterTab,
} from "native-base";

import DisplayByDistance from "./Distance/";
import DisplayByAvis from "./Avis/";
import styles from "./styles";
import { StackNavigator } from 'react-navigation';
export default class ConfigTab extends Component {

 constructor(props) {
    super(props);
    this.state = {
      tab1: false,
      mapRegion: null,
    lastLat: null,
    lastLong: null,
    };
  }

toggleTab1() {
    this.setState({
      tab1: true,
    });
  }

  render() {
    return (
      <Container>
        <Header hasTabs>
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body style={{ flex: 3 }}>
            <Title> Résultats</Title>
          </Body>
          <Right />
        </Header>
        <Tabs style={{ elevation: 3 }}>

          <Tab
            heading={
              <TabHeading><Icon name="navigate" /><Text 
              style={styles.TabTitle}>Le plus prés</Text></TabHeading>
            }
          >

            <DisplayByDistance />
          </Tab> 
          <Tab heading={<TabHeading><Icon name="star-half" /><Text
          style={styles.TabTitle}>Le mieux noté</Text></TabHeading>}>

            <DisplayByAvis />
          </Tab>

        </Tabs>
         <Footer>
          <FooterTab>
            <Button active={this.state.tab1} onPress={() => this.props.navigation.navigate("MyMap")}>
              <Icon active={this.state.tab1} name="paper-plane" />
              <Text>Afficher la carte</Text>
            </Button>

          </FooterTab>
        </Footer>
      </Container>
    );
  }
}
AppRegistry.registerComponent('ConfigTab', () => ConfigTab);

根据我编辑过的文件，当我按下TabOne时，它会打开右侧选项卡，其中的内容位于名为Distance.js的文件中所以现在一切正常，除了我的Distance.js文件中无法识别“props.navigation.navigate”。

这是我的档案

Distance.js

import React, { Component, PropTypes } from "react";
import {...} from 'react-native';
import {...} from "native-base";
import styles from "./../styles";
import { StackNavigator } from 'react-navigation';
import App from "./../../../App"
var productArray = [];

class TabOne extends Component {
constructor(props){
 super(props)
  var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid});
  this.state={
    data:[],
    dataSource: dataSource.cloneWithRows(productArray),
    isLoading:true,
  }
  this.donePressed=this.donePressed.bind(this);
};

componentDidMount()
{
this.getTheData(function(json){
     productArray = json;
     this.setState({
     dataSource:this.state.dataSource.cloneWithRows(productArray),
       isLoading:false
     })
    }.bind(this));  
}

donePressed() {
  const { navigate } = this.props.navigation; 
  navigate('UserDetails');
}

getTheData(callback) {

    var url = "http://paradox.ma/workshop/webservices/getPOI_info.php";
fetch(url)
     .then(response => response.json())
     .then(json => callback(json))
     .catch(error => alert("Erreur de connexion Internet") );
   }
list(rowData) {
if (rowData === null) { return <View></View>; };
let VerifiedUser;
const VerifiedTest=rowData.Verified;
  if (VerifiedTest==='1') 
  {
        VerifiedUser=(
                <Right>
                    <View style={styles.avatarBox}>
                    <Text numberOfLines={2}><Icon name="verified" size={30} color="green" /></Text>
                    <Text>Profil vérifié</Text>
                    </View>
                </Right>
      )}
return (
              <ListItem thumbnail

              onPress={() => this.donePressed().bind(this)}
         >
                <Left>
                 <View style={styles.avatarBox}>
                  <Thumbnail size={55} source={{uri:rowData.Avatar}} />
                <Text style={styles.avatarTitle}>{rowData.Title}</Text>
                </View>
                </Left>


                <Body>
                  <Text>{rowData.Title}</Text>
                   <Text numberOfLines={2}><Icon name="map-marker" size={15} color="grey" /> {rowData.Address}, {rowData.City} ({rowData.Distance} km)</Text>
                  <Text numberOfLines={3}>{rowData.Description}</Text>
                </Body>

               {VerifiedUser}
              </ListItem>
  );
}
  render(){
    return(

        <Container>
        <View>
        <TouchableOpacity onPress={() => this.donePressed().bind(this)}>
        <Text>Test</Text>
        </TouchableOpacity>
        </View>
        </Container>
      );
  }
}
export default TabOne;

当我用this.props.navigation.navigate替换alert("Hello")时，我的函数donePressed（）工作得非常好但是一旦我尝试在屏幕之间导航，我就会出错：Undefined is not an object...this_2.props.navigation.navigate().

我真的不知道问题出在哪里。我试图在构造函数中定义函数，没办法。

希望找到解决方案。

Answer 1

如果您想对导航道具进行反应以注入导航道具，则需要将该特定Component声明为导航器场景

但我完全建议使用React navigation的TabNavigator，你可以在这里找到如何嵌套导航器：https://reactnavigation.org/docs/intro/nesting

NativeBase：导航到Tab（KitchenSink）内的屏幕

App.js

index.js

Distance.js

1 个答案: