React native 创建带有导航字段的新组件
我尝试创建一个包含两个按钮的新react本机组件。我定义了两个属性next to going on the next page和prev to go in the previous page,但我有以下错误: undefined不是计算“\u this.props.navigation.navigate”的对象 我发现了很多类似的问题,但我没有找到任何有效的解决方案 代码如下:React native 创建带有导航字段的新组件,react-native,react-native-navigation,React Native,React Native Navigation,我尝试创建一个包含两个按钮的新react本机组件。我定义了两个属性next to going on the next page和prev to go in the previous page,但我有以下错误: undefined不是计算“\u this.props.navigation.navigate”的对象 我发现了很多类似的问题,但我没有找到任何有效的解决方案 代码如下: import PropTypes from 'prop-types' import React, { Componen
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',
}
});
我以这种方式将对象包括在另一页中:
<ButtonNavigation next={'NumberVehicle'} prev={'Home'}/>
在中,您需要将导航对象添加为道具。比如:
<ButtonNavigation
next={'NumberVehicle'}
prev={'Home'}
navigation={this.props.navigation}
/>
及
你可以改变这个
this.props.next}title='Indietro'color='00b0ff'/>
this.props.prev}title='Avanti'color='gold'/>
您可能忘了将父组件中的导航作为道具发送。请向我显示传递数据的代码。@我只是编辑了这篇文章
const { next, prev, navigation } = this.props;
navigation.navigate(..)