我尝试了我在网络上看到的所有内容，但它们都没有解决我的问题。它总是给我"无法读取不确定的属性'导航。
我该如何解决？
我将信息从第1页发送到标题，但是我无法从标题发送到第1页。而且，如何从标题到第1页，我的意思是如何使用单击某些按钮打开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>
);
};
}
这是我使用标头组件的页面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>
);
}
问题是您没有将导航道具传递给标头组件。如果您这样通过它们：
<Header color1 = {Blue.length} color2 = {Yellow.length} navigation={this.props.navigation}/>
然后在您的标题组件中您应该能够通过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'
}
});
您缺少构造函数。您需要使用构造函数，然后使用this.props。添加此：
export default class Header extends Component {
constructor() {
super(props)
}
render() {
//rest of your code
您从this.props.navigation发生破坏{navigate}。您的错误是因为this.props.navigation没有navigate属性。尝试到console.log(this.props.navigation)并检查是否有navigate属性