我变得不确定,不是评估_this.props.navigation的对象。这是我的代码。
我想在多个屏幕中使用,所以我必须
将其提取出来,并在需要的任何地方调用它。
我尝试https://github.com/react-navigation/react-navigation/issues/2198#issuecomment-316883535算不上运气。
Category.js
import React, {Component} from 'react';
import {View, FlatList} from 'react-native';
import {ListItem} from 'react-native-elements'
import {AppRegistry, TouchableOpacity, ActivityIndicator} from 'react-native';
import {SearchHeader} from '../SearchHeader';
export default class Category extends Component {
constructor() {
super();
this.state = {
list: [],
};
this.onPress = this.onPress.bind(this);
}
static navigationOptions = {
title: 'Categories',
headerStyle: {backgroundColor: '#ffb30c'},
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "98%",
backgroundColor: "#CED0CE",
marginLeft: "1%",
marginRight: "1%"
}}
/>
);
};
_keyExtractor = (item, index) => item.name;
renderHeader = () => {
return (<SearchHeader />);
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large"/>
</View>
);
};
onPress = (item) => {
this.props.navigation.navigate('SpecTypeScreen',{cat:item});
};
search = () => {
};
render() {
return (
<FlatList
data={this.state.list}
renderItem={({item}) => (
<TouchableOpacity onPress={() => this.onPress(item)}>
<ListItem
title={`${item.name}`}
containerStyle={{borderBottomWidth: 0}}
/>
</TouchableOpacity>
)}
keyExtractor={this._keyExtractor}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
/>
);
}
}
AppRegistry.registerComponent('CategoryScreen', () => CategoryScreen);
SearchHeader.js
import React, {Component} from 'react';
import Autocomplete from 'react-native-autocomplete-input';
import {
AppRegistry,
View,
StyleSheet,
Platform,
Text,
TouchableOpacity,
} from 'react-native';
import {withNavigation} from 'react-navigation';
import colors from './config/colors';
import normalize from './config/normalizeText';
export class SearchHeader extends Component {
constructor() {
super();
this.state = {
list: [],
};
}
search = (term) => {
if (term.length > 2) {
fetch("https://myUrl?term=" + encodeURI(term))
.then((response) => response.json())
.then((responseJson) => {
this.setState({list: responseJson});
console.log(responseJson);
})
.catch((error) => {
console.error(error)
});
}
else{
this.setState({list: []});
}
};
onPress = (item) => {
this.props.navigation.navigate('ProductScreen',{spec:item});
};
render() {
return (
<View style={[
styles.container, styles.containerLight
]}>
<Autocomplete placeholder="Search Specs & Approvals..."
autoCorrect={false}
onChangeText={this.search}
data={this.state.list}
containerStyle={{backgroundColor: "#d71201"}}
inputStyle={{backgroundColor: "#fff"}}
renderItem={({ id, specification }) => (
<TouchableOpacity style={styles.autocompleteContainer} onPress={this.onPress.bind(this, specification)}>
<Text style={styles.itemText}>
{specification}
</Text>
<View
style={{
height: 1,
width: "98%",
backgroundColor: "#CED0CE",
marginLeft: "1%",
marginRight: "1%"
}}
/>
</TouchableOpacity>
)}
style={[
styles.input,
styles.inputLight,
{borderRadius: Platform.OS === 'ios' ? 15 : 20},
{paddingRight: 50}
]}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderTopWidth: 1,
borderBottomWidth: 1,
borderBottomColor: '#000',
borderTopColor: '#000',
backgroundColor: "#d71201",
maxHeight:70
},
containerLight: {
borderTopColor: '#e1e1e1',
borderBottomColor: '#e1e1e1',
},
input: {
paddingLeft: 26,
paddingRight: 19,
margin: 8,
borderRadius: 3,
overflow: 'hidden',
backgroundColor: colors.grey5,
fontSize: normalize(14),
color: colors.grey3,
height: 40,
...Platform.select({
ios: {
height: 30,
},
android: {
borderWidth: 0,
},
}),
},
inputLight: {
backgroundColor: "#fff"
},
autocompleteContainer: {
backgroundColor:"#fff",
marginLeft: 10,
marginRight: 10
},
itemText: {
fontSize: 15,
margin: 5,
marginLeft: 20,
paddingTop:5,
paddingBottom:5
},
descriptionContainer: {
backgroundColor: '#F5FCFF',
marginTop: 8
},
infoText: {
textAlign: 'center'
},
titleText: {
fontSize: 18,
fontWeight: '500',
marginBottom: 10,
marginTop: 10,
textAlign: 'center'
},
directorText: {
color: 'grey',
fontSize: 12,
marginBottom: 10,
textAlign: 'center'
},
openingText: {
textAlign: 'center'
}
});
AppRegistry.registerComponent('SearchHeader', () => SearchHeader);
最佳答案
您需要向下传递navigation
道具。尝试这个:
renderHeader = () => {
return (<SearchHeader navigation={this.props.navigation} />);
};
关于javascript - undefined不是评估_this.props.navigation React Native的对象,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49374052/