开发者问题收集

无法读取未定义的属性导航

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