javascript - 无法读取未定义的属性“导航”

Question

我尝试了在网上看到的所有方法，但没有一个能解决我的问题。它总是给我“无法读取未定义的属性‘导航’。

我该如何解决这个问题？

我将信息从 Page1 发送到页眉，但我无法从页眉发送到 Page1。以及如何从页眉转到 page1 我的意思是如何通过单击某个按钮打开 Page1

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

export default class Header extends Component {

    constructor(props){
        super(props);
    }

    render() {
        console.warn(this.props.navigation);
    return (
        <View style= {styles.headerStyle}>
            <View style= {[styles.View2, {backgroundColor: 'rgba(116,185,255,0.3)'}]} >
                <Text style={[styles.childText, {color:'#74b9ff'}]} >{this.props.color1}</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(255,234,167,0.3)'}]}>
                <Text style={[styles.childText, {color:'#ffeaa7'}]} >{this.props.color2}</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(204,255,204,0.3)'}]}>
                <Text style={[styles.childText, {color:'#ccffcc'}]} >0</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(255,128,128,0.3)'}]}>
                <Text style={[styles.childText, {color:'#ff8080'}]} >0</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(207,207,176,0.3)'}]}>
                <Text style={[styles.childText, {color:'rgba(207,207,176,0.3)'}]} >0</Text>
            </View>
        </View>
    );
 };
}

这是我使用页眉组件的 Page1。

import React, { Component } from 'react';
import { View, Text, FlatList, Image, ScrollView} from 'react-native';
import DOMParser from 'react-native-html-parser';
import axios from 'axios';
import Header from './Header';
import Bar from './Bar';
import Footer from './Footer';

const Blue = [];
const Yellow = [];

export default class Page1 extends Component {    

    state = {
         leader: []
    }

    componentWillMount() {
        fetch('url')
        .then(response => {
            if (response.ok) {
                return response;
            }else {
                let error = new Error('Error ');
                error.response = response;
                throw error;
            }
            },
            error => {
                let errmess = new Error(error.message);
                throw errmess;
            })
        .then(response => response.text())
        .then(leaders => {
            const str = leaders.substring(76);
            const str2 = str.substring(0, str.length - 9);
            const x = JSON.parse(str2);
            this.setState({ leader: x });

        })
        .catch(error => {
            this.setState({ errMessage: error.message });
        });
        }

        renderall() {           
            return this.state.leader.map(alb => 
              <View style={styles.container} key= {alb.Ref}> 
                <Text style={[styles.textStyle, {marginLeft:'5%'}]}> {alb.Tescil_No}  </Text>

                <Text style={[styles.textStyle, {marginLeft:'6%'}]}> {alb.GumrukAdi}  </Text>

                <Text style={[styles.textStyle, { marginLeft:'5%'}]}> {alb.ACIKLAMA}   </Text>                                                
              </View>
          )
        }

        count(){
            return this.state.leader.map(color => {
                if(color.Renk == 'MAVI'){
                    Blue.push("MAVI");
                }
                else if(color.Renk == 'SARI')
                {
                    Yellow.push("SARI")
                }
            })
        }

    render() {

       this.count();

        console.log(Blue.length);

        console.log(this.state.leader);

        return (

            <View style= {styles.firstView}> 
                 <View style={{flex: 1.5}}>
                     <Header color1 = {Blue.length}  color2 = {Yellow.length}/>
                 </View >
                     <View style={{flex: 0.5, backgroundColor:'#f2f2f2'}}>
                    <Bar />
                    </View>
                <View style={{flex: 9}}>
                    <ScrollView>
                {this.renderall()}
                </ScrollView>
                </View>
                <View style={styles.footerStyle}>
                  <Footer />
                  </View>  
            </View>
        );
}

Answer 1

问题是您没有将导航 Prop 传递给 Header 组件。如果你像这样传递它们:

<Header color1 = {Blue.length}  color2 = {Yellow.length} navigation={this.props.navigation}/>

然后在您的 Header 组件中，您应该能够通过 this.props.navigation.navigate

访问它

这当然是因为您的 Page1 包含在导航器中并且可以访问导航 Prop ，否则您将不得不将它们传递给它。

这里有一个小点心，展示了如何在页面上使用标题组件构建基本导航

https://snack.expo.io/@andypandy/navigation-with-custom-header

代码如下:

请注意，Screen1.js 和 Screen2.js 都包含在导航器中，该导航器是在 MainNavigation.js 中创建的。这使他们可以访问导航 Prop 。然后可以将这些 Prop 传递给 Screen1 和 Screen2

中的子组件

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Header.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Header extends React.Component {

  render() {
    console.log('props', this.props)
    return (
      <View style={styles.container}>
        <Button title={'Go to next screen'} onPress={() => this.props.navigation.navigate('Screen2',  {})} />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    height: 80,
    width: '100%',
    backgroundColor: '#006600',
    justifyContent: 'flex-end'
  }
});

Screen1.js

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

export default class Screen1 extends React.Component {


  render() {
    return (
      <View style={styles.container}>
        <Header navigation={this.props.navigation}/>
        <View style={{flex: 1}} />
      </View>
    )
  }
}

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

Screen2.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen2 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>New screen</Text>
        <Button title={'Go back'} onPress={() => this.props.navigation.goBack()}/>
      </View>
    )
  }
}

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