无法读取未定义的属性导航
2018-09-11
334
我正在将数组映射到组件。
{this.state.forms.map((data)=><Box data={data} />)}
组件 Box 的代码是
import React,{Component} from 'react'
import {View,Text,ScrollView,Image,Button,StyleSheet,AsyncStorage} from 'react-native'
class Login extends Component{
constructor(props){
super(props)
this.state = {
forms:[],
}
this.onSetCompany = this.onSetCompany.bind(this)
}
onSetCompany(data){
console.log(data)
// AsyncStorage.setItem('Company',data);
this.props.navigation.navigate('CompanyDeatails')
}
render(){
return(
<View style={style.container}>
{console.log(this.props.data)}
<View style={style.box}>
<View style={style.box1}>
<Text style={style.row2}>{this.props.data.CompanyName} bkb</Text>
</View>
<View style={style.box3}>
<Text style={style.row2}>{this.props.data.LastDate} </Text>
</View>
</View>
<View style={style.buttonBox}>
<View style={style.button}>
<Button color="#6d5d17" title="Fill" onPress={()=>this.props.navigation.navigate('CompanyDeatails')}></Button>
</View>
</View>
</View>
)
}
}
export default Login
var style = StyleSheet.create({
.....
})
我的路由
export default class App extends Component{
render(){
return(
<Links />
)
}
}
const Links = DrawerNavigator({.....,
CompanyDeatails:{screen:CompanyDeatails},
....,
},{contentComponent:props => <Slider {...props}/>
})
当我将数组映射到 Box 时,该框中的导航不起作用。我有可用的导航,这些导航在我的其余应用程序上有效,但在这个特定的组件中无效。
例如
在 login.js 中,我有
this.props.navigation.navigate('C1')
它可以正常工作,但是当我将同一行粘贴到 Box 组件中时,它会抛出错误。
无法读取未定义的属性导航
1个回答
如果
Box
组件不是
navigator
的一部分,那么您应该将其包装在
withNavigation
函数中,以便访问
navigation
对象。请查看
此处
的文档。>
考虑以下示例
import React from 'react';
import { withNavigation } from 'react-navigation';
class Box extends React.Component {
...
render() {
...
}
}
export default withNavigation(Box);
现在,在 Box 组件中,您可以访问
this.props.navigation.navigate
函数。
希望这会有所帮助!
Prasun
2018-09-11