我尝试了所有在网络上看到的内容，但没有一个解决了我的问题。 它总是给我“无法读取未定义的属性'navigate'。
我该如何解决？
我将信息从第1页发送到页眉，但无法从页眉发送到第1页。以及如何从标题转到第1页我的意思是如何通过单击某些按钮打开第1页
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>
);
};
}
这是我使用页眉组件的第1页。
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>
);
}
答案 0 :(得分：1)
问题是您没有将导航道具传递给Header组件。如果您这样通过它们：
<Header color1 = {Blue.length} color2 = {Yellow.length} navigation={this.props.navigation}/>
然后在Header组件中，您应该可以通过this.props.navigation.navigate
这当然是因为您的Page1包含在导航器中并且可以访问导航道具，否则您必须将它们传递给该导航道具。
这里有个小吃，展示了如何使用页面上的标题组件构造基本导航
https://snack.expo.io/@andypandy/navigation-with-custom-header
代码如下：
请注意，Screen1.js和Screen2.js都包含在MainNavigation.js中创建的导航器中。这使他们可以访问导航道具。然后，可以将这些道具传递到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'
}
});
答案 1 :(得分：0)
您缺少构造函数。您需要构造函数才能使用this.props。添加此内容：
export default class Header extends Component {
constructor() {
super(props)
}
render() {
//rest of your code
您从{navigate}破坏了this.props.navigation。您的错误是因为this.props.navigation没有navigate属性。尝试console.log(this.props.navigation)并检查是否有navigate属性