问题描述
我尝试了我在网上看到的所有内容，但没有一个能解决我的问题.它总是给我无法读取未定义的属性'导航'.
I tried everything which I saw on the web but none of them solved my problem.it always gives me "Cannot read property 'navigate' of undefined.
我该如何解决这个问题?
How could I solve this?
我将信息从 Page1 发送到 Header，但我无法从 Header 发送到 Page1.以及如何从标题转到第 1 页我的意思是如何通过单击某个按钮打开第 1 页
I send info from Page1 to Header, But I couldnt send from Header to Page1. and also how can go from header to page1 I mean how to open Page1 with clicked some button
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，我在其中使用了 Header 组件.
here is my Page1 where I use Header Component.
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>
);
}
推荐答案
问题在于您没有将导航道具传递给 Header 组件.如果你像这样传递它们:
The issue is that you are not passing your navigation props to your Header component. If you pass them like this:
<Header color1 = {Blue.length} color2 = {Yellow.length} navigation={this.props.navigation}/>
然后在您的 Header 组件中，您应该能够通过 this.props.navigation.navigate
Then in your Header component you should be able to access the it via this.props.navigation.navigate
这当然是您的 Page1 包含在导航器中并且可以访问导航道具，否则您必须将它们传递给导航器.
This is of course that your Page1 is contained in a navigator and has access to the navigation props, otherwise you will have to pass them to that.
这是一个小吃，展示了如何使用页面上的标题组件构建基本导航
Here is a snack that shows how to construct basic navigation with a header component on the page
https://snack.expo.io/@andypandy/navigation-with-custom-header
代码如下:
请注意，Screen1.js 和 Screen2.js 都包含在 MainNavigation.js 中创建的导航器中.这允许他们访问导航道具.然后可以将这些道具传递给 Screen1 和 Screen2
Notice that both Screen1.js and Screen2.js are contained within a navigator, created in the MainNavigation.js. This allows them to have access to the navigation props. These props can then be passed to child components within Screen1 and Screen2
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'
}
});
这篇关于无法读取属性“未定义的导航"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！