- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我收到 undefined is not an objectvaluing _this.props.navigation。这是我的代码。
I want to use the in multiple screens so I have to extract it out and call it in any I need it in.
我已经尝试过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/
我是 React Native 的新手,目前正在研究 React Native Navigation Docs 。我想知道:navigation.push() 和 navigation.navigat
来自 this和 this , 我了解到 navigation.navigate() 之间存在有意义的差异和 navigation.push() .尽管如此,我仍然想知道我是否可以使用 navigat
我正在使用 react-navigation 3.6.1 和 react-native-camera 2.2.2。当我拍照时,进入下一个屏幕的按钮在第一次按下时没有任何作用。必须按多次 这是针对 io
androidx.navigation:navigation-ui 和 android.arch.navigation:navigation-ui-ktx 有什么区别? 当我在我的 gradle 中使
使用 TypeScript 时,react-navigation 中发生的一个常见错误是: Argument of type 'string' is not assignable to paramet
我有一个使用 React Native 的应用程序,我正在使用 react-navigation (5.2.9)。 我构建了一个 Stack.Navigator,我有我的屏幕,但我希望页脚组件在外面,
我有一个组件在 NavigationContainer 组件内但在 Stack Navigator 之外。我能知道组件中的当前路由是什么吗?我不能使用 useRoute Hook ,因为它出错了: C
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 3年前关闭。 Improve this questi
我正在学习 react-native 导航 https://reactnavigation.org/docs/intro/ 。我在那里的例子中看到 class HomeScreen extends R
我在我的 native 项目中使用 eslint airbnb。如果我没有验证 Prop ,特别是来自 react-navigation 的 Prop ,eslint 会抛出错误 linting .
在我的应用程序中,我有 6 个不同的页面。 有 1 个页面称为“收藏夹页面”,其中列出了用户选择的收藏夹。它们由一列显示,该列使用来自另一个类的列表。列表代码如下: List favoriteCo
我在 react 导航问题部分看到很多人使用 this.props.navigation.dispatch 以编程方式导航。是否有任何特定原因或用例需要在 this.props.navigation.
我在 vue.js 中开始了一个新元素。我添加了导航栏。有一次,我注意到控制台中有问题: Audit usage of navigator.userAgent, navigator.appVersio
首先,是的,我知道有很多与此问题相关的答案,但我发现了这种在 react-native 0.60 中进行导航的特定方法,问题是,我还没有弄清楚,而且我不想刮掉这个导航方法来测试不同的方法,这是导航文件
react 导航 5 我在 TabNavigator 内部构建了一个 StackNavigator,并且主屏幕和其他屏幕之间的导航正在工作。但问题是,当我从 Tab2 移动到 Tab1 时,我希望 T
我正在尝试在 react-native with expo 中使用 react-navigation-redux-helpers 将 redux 与 react-navigation 集成。但是,尽管
我正在尝试使用最新的 react-navigation 版本运行我的应用程序但无法正常工作。也尝试使用此解决方案 ( Invariant Violation: The navigation prop
我正在尝试使用 React Navigation 和 StackNavigator 在我的应用中导航。 我有一个带有 onPress={() => navigate('DetailsScreen'
我在我的应用程序中使用 react 导航。如果我从 screen A 导航到 Screen B,如果转换完成,我如何获得一些反馈。 最佳答案 从 'react-native 导入 { Interact
我遵循的是身份验证流程 (https://reactnavigation.org/docs/en/auth-flow.html) 上的 React 导航指南,但略有不同。我在 LoginScreen
我是一名优秀的程序员,十分优秀!