问题描述
我尝试创建一个包含两个按钮的新 react-native
组件.我定义了两个属性 next
进入下一页和 prev
进入前一页,但我有这个错误:
I try to create a new react-native
component that contains two button. I define two property next
to going on the next page and prev
to going in the precedent page but I have this error:
undefined 不是一个对象(评估 '_this.props.navigation.navigate')
我发现了很多类似的问题,但我没有找到任何有效的解决方案.
I found so much question similar this but I don't found any valid solution.
这是代码:
import PropTypes from 'prop-types'
import React, { Component } from 'react';
import { View, StyleSheet, Button } from 'react-native';
export default class ButtonNavigation extends Component {
static propTypes = {
next: PropTypes.string,
prev: PropTypes.string,
}
render() {
const { next, prev } = this.props;
return (
<View style={styles.bottomContainer}>
<View style={styles.buttonContainer}>
<Button onPress={() => this.props.navigation.navigate(next)} title='Indietro' color='#00b0ff'/>
</View>
<View style={styles.buttonContainer}>
<Button onPress={() => this.props.navigation.navigate(prev)} title='Avanti' color='gold'/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
bottomContainer: {
flex: 1,
flexDirection: 'row',
position: 'absolute',
bottom: 10,
padding: 20,
justifyContent: 'space-between'
},
text: {
fontSize: 30,
},
buttonContainer: {
flex: 1,
padding: 20,
justifyContent: 'center',
alignContent: 'center',
}
});
我以这种方式将对象包含在另一个页面中:
I include the object in the other page in this way:
<ButtonNavigation next={'NumberVehicle'} prev={'Home'}/>
推荐答案
在你的<ButtonNavigation next={'NumberVehicle'} prev={'Home'}/>
你需要添加导航对象作为道具.所以像:
In your <ButtonNavigation next={'NumberVehicle'} prev={'Home'}/>
you need to add the navigation object as a prop. So something like:
<ButtonNavigation
next={'NumberVehicle'}
prev={'Home'}
navigation={this.props.navigation}
/>
(如果与实际导航对象不同,请确保替换this.props.navigation)
(Make sure to replace this.props.navigation if it differs from the actual navigation object)
然后你可以:
const { next, prev, navigation } = this.props;
和
navigation.navigate(..)
这篇关于创建带有导航字段的新组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!