如何在React本機組件之間導航？

Question

當我單擊<TouchableOpacity onPress= this.onPressCheckParkingStatus.bind(this)}>

它顯示錯誤導航器：盡管它在Login.js to Floor.js可以工作到Login.js to Floor.js但無法讀取未定義的屬性“ push” 。 但在FloorItem.js中FloorItem.js 。

這是我的組件結構：

src        //folder
components //folder
   floor //folder
       Floor.js
       FloorItem.js
   login
      .Login.js
      .LoginFooter.js
   parking
       parking.js
index.js  
index.ios.js 

有很多的js，但是上面提到的是必需的。

Login.js

 import React, { Component } from 'react';
 import {
  StyleSheet,View,Text,Image,TextInput,TouchableOpacity,
  KeyboardAvoidingView,ActivityIndicatorIOS,AsyncStorage
  } from 'react-native';

import LoginForm from './LoginForm';
import LoginFooter from './LoginFooter';

const ACCESS_TOKEN = 'access_token';

export default class Login extends Component {
    constructor(){
        super();
        this.state = {
        username: "",
        password: "",
        error: "",
        accessToken:"",
        showProgress:false
     }
 }

 storeToken(access_token){
   try {
       console.log("token for setting= "+access_token);
        AsyncStorage.setItem(ACCESS_TOKEN,access_token);

   } catch (error) {
       console.log("error in logging token=");
       console.log(error.name);
       console.log(error.message);
       console.log(error.stack);
       this.redirect('login');
   }
 }    
 redirect(routeName) {    
        this.props.navigator.push({
          name: routeName
        });
 }       
 onPressSignin() {
         try {
           console.log('login from window');
           this.setState({showProgress: true});
           this.error="";              
           **this.redirect('floor');**

         } catch (error) {
            console.log("error in logging token=");
            console.log(error.name);
            console.log(error.message);
            console.log(error.stack);
         }
   }

 render() {
    return (
      <View style={styles.container}>

        <View style={styles.logoContainer}>
          <Image
            style={styles.logo}
            source={require('../../images/logo.png')}/>
          <Text
            style={styles.logoTitle}>Smart Parking...</Text>
        </View>
        <View>
         <Text style={Loginformstyles.error}>
            {this.state.error}
          </Text>
       </View>

        <KeyboardAvoidingView behavior='padding'  style={styles.formContainer}>

          <View style={Loginformstyles.container}>
            <TextInput
              onChangeText={ (text)=> this.setState({ username : text }) }
              placeholder ="Username"
              placeholderTextColor="rgba(0,0,0,0.6)"
              style={Loginformstyles.input}
              returnKeyType="next"
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
              onSubmitEditing={() => this.passwordInput.focus()}
            />
            <TextInput
              placeholder="Password"
              placeholderTextColor="rgba(0,0,0,0.6)"
              secureTextEntry={true}
              style={Loginformstyles.input}
              returnKeyType="go"
              onChangeText={(text)=>this.setState({password:text})}
            />

            <TouchableOpacity onPress={this.onPressSignin.bind(this)}
              style={Loginformstyles.buttonContainer}>
              <Text style={Loginformstyles.buttonText}>Sign in</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={Loginformstyles.forgotPassword}>Forgot Password</Text>
            </TouchableOpacity>

          </View>
        </KeyboardAvoidingView>

        <View style={styles.footerContainer}>
          <LoginFooter/>
        </View>
      </View>
    );
  }
 }

我在這里沒有提到CSS，因為文件越來越大。 在“登錄”上單擊時，它將重定向到所需的樓層組件。 在floor組件中，我繼承了FloorItem 。

**Floor.js**

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,AsyncStorage,
  KeyboardAvoidingView
} from 'react-native';
import FloorItem from './FloorItem';
const ACCESS_TOKEN = 'access_token';
export default class Floor extends Component {
  constructor(props){
    super(props);
    //this.redirect.bind(this,'floor');
    this.state={
        parking_details:[],
        accessToken:""
    }
  }
async getToken() {
    try {
      let accessToken = await AsyncStorage.getItem(ACCESS_TOKEN);
        console.log(accessToken);
      if(!accessToken) {
          this.redirect('login');
      } else {
          this.setState({accessToken: accessToken})
          //this.fetchFloorDetails();
      }
    } catch(error) {
        console.log(error.name);
        console.log(error.message);
        console.log(error.stack);
        this.redirect('login');
    }
  }
componentWillMount() {
    this.fetchFloorDetails();
  }
redirect(routeName) {
  this.props.navigator.push({
    name: routeName
  });
}
fetchFloorDetails(){
      try {
          this.getToken();
          var parkingInfo=[
            { available_count:0,floor_no:5 ,totalparkingspace:150},
            { available_count:0,floor_no:4 ,totalparkingspace:140},
            { available_count:0,floor_no:3 ,totalparkingspace:180},
            { available_count:52,floor_no:2 ,totalparkingspace:120},
            { available_count:24,floor_no:1 ,totalparkingspace:80},
            { available_count:0,floor_no:0 ,totalparkingspace:170}
          ];
          this.setState({parking_details:parkingInfo});
      } catch (error) {
        console.log(error.name);
        console.log(error.message);
        console.log(error.stack);
      } finally {
      }
}
  render(){
      {
         var parkingFloors=[];
          this.state.parking_details.map(function(item){
            parkingFloors.push(
              <FloorItem navigator={this.props.navigator}
          key={item.floor_no}
          parkingAvailablecount={item.available_count}  
          parkingFloorCount={item.floor_no} 
          totalParkingSpace={item.totalparkingspace} />
            );
          })
      }
    return (
      <View style={styles.container}>
         <View style={styles.bgImageWrapper}>
            <Image source={require('../../images/bg.png')} style={styles.bgImage} />
          </View>
        <View style={styles.locationContainer}>
          <Image
            style={styles.location}
            source={require('../../images/location.png')}/>
          <Text
            style={styles.locationTitle}>12920 38th Ave S.E. Bellevue, Wa 98006</Text>
        </View>
        <View style={styles.floorItemContainer}>
           {parkingFloors}
        </View>
      </View>
    );
  }
}

**FloorItem.js**

    import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity
} from 'react-native';
import renderIf from '../renderIf';

const ACCESS_TOKEN = 'access_token';

export default class FloorItem extends Component {

  constructor(props){
    super(props);
    this.state = {
         isParkingAvailable: false,
         accessToken: ""
        };
    this.set_object=this.set_object.bind(this);
    this.props.totalParkingSpace=0;
    this.set_parking_floorImages=this.set_parking_floorImages.bind(this);
    //this.redirect=this.redirect.bind(this);
    // Toggle the state every second
/*    setInterval(() => {
      this.setState({ isParkingAvailable: !this.state.isParkingAvailable });
    }, 1000);
*/
  }

redirect(routeName){
this.props.navigator.push({
  name: routeName
});
}

async getToken() {
  try {
    let accessToken = await AsyncStorage.getItem(ACCESS_TOKEN);
      console.log(accessToken);
    if(!accessToken) {
        this.redirect('login');
    } else {
        this.setState({accessToken: accessToken})
    }
  } catch(error) {
      console.log("Something went wrong");
      this.redirect('login');
  }
}
onPressCheckParkingStatus=()=>{
  this.getToken();       
  this.redirect('parking');
}

  render() {
     this.set_object();
    let parkingFloorImage = this.state.isParkingAvailable ? require('../../images/floor.png') : require('../../images/floor_full.png');
    let parkingFloorNumberImage =this.set_parking_floorImages(this.props.parkingFloorCount);
    //this.state.isParkingAvailable ? require('../../images/f00.png') : require('../../images/f01.png');
    return (
      <View style={styles.container}>
        <View style={styles.textContainer}>
          {renderIf(this.state.isParkingAvailable)(
            <TouchableOpacity onPress={this.onPressCheckParkingStatus.bind(this)}>
              <View style={styles.parkingAvailableTextContainer}>
               <Text
                 style={styles.parkingAvailableText}>AVAILABLE</Text>
               <Text
                 style={styles.parkingNumberText}>
                   {this.props.parkingAvailablecount}</Text>

              </View>
            </TouchableOpacity>
          )}
          {renderIf(!this.state.isParkingAvailable)(
            <View style={styles.parkingFullTextContainer}>
              <Text
                style={styles.parkingFullText}>PARKING FULL</Text>
            </View>
          )}
        </View>
        <View style={styles.floorImageContainer}>
          <Image
            style={styles.floorImage}
            source={parkingFloorImage}/>
          <Image
            style={styles.floorNumberImage}
            source={parkingFloorNumberImage}/>
        </View>
      </View>
    );
  }
}


 **index.js**

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component} from 'react';
import { Text, Navigator, TouchableHighlight } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { AppRegistry } from 'react-native';
import Login from './src/components/login/Login';
import Floor from './src/components/floor/Floor';
import FloorItem from './src/components/floor/FloorItem';
import Parking from './src/components/parking/Parking';



export default class SmartParking extends Component {

  componentDidMount() {
      SplashScreen.hide();
  }
  constructor(){
     super()
  }

  renderScene(route, navigator) {


    if(route.name == 'login') {
      return <Login  navigator={navigator} />
    }
    if(route.name == 'floor') {
            return <Floor navigator={navigator} {...route.props} />
    }
    if(route.name == 'parking') {
          return <Parking navigator={navigator} {...route.props} />
    }

  }

 render(){
    return(

      <Navigator initialRoute={ { name : 'login' } }
            renderScene={this.renderScene.bind(this)}
          />
    );
 }
}

AppRegistry.registerComponent('SmartParking', () => SmartParking);


index.io.js    //Main file 

import {
     AppRegistry,
 } from 'react-native';

 import index from './index.js'

 AppRegistry.registerComponent('examples', () => index);

Application Flow:---
 index.io.js ==>index.js==>login.js==>floor.js(FoorItem.js). here FloorItem.js has been accessing by component  in floor.js.

我的導航器正在從“登錄”到“樓層”工作。 我正在將FloorItem作為地板類中的組件加載，這是我的問題：-

      **Navigator: Cannot read property 'push' of undefined**

我沒有得到基於組件的導航器示例，這就是為什么我在這里提出問題。 提前致謝。 我現在受夠了。我不知道為什么它在一個組件上起作用而在其他組件上不起作用。

Answer 1

您的代碼在這里看起來不錯。 但是唯一的問題是您要在組件數組中傳遞{this.props.navigator} 。 唯一的問題。

因此，像這樣在Floor.js中更改代碼。

var parkingFloors=[],navigate={};
     navigate=this.props.navigator;
      this.state.parking_details.map(function(item){
        parkingFloors.push(
          <FloorItem navigator=navigate
      key={item.floor_no}
      parkingAvailablecount={item.available_count}  
      parkingFloorCount={item.floor_no} 
      totalParkingSpace={item.totalparkingspace} />
        );
      })

經過100％的測試，並且可以正常工作。