Navigator 的 renderScene 函数中返回的组件无法接收到传入的属性



  • 使用 Navigator 时 renderScene 函数中返回的组件在渲染时无法接收到在函数内部传入的属性数据,如;

    import React,{
    Component,
    StyleSheet,
    Navigator,
    Text,
    View
    } from 'react-native'

    import HomePage from './pages/home'

    export default class Home extends Component {
    render() {
    let defaultName = 'HomePage',
    defaultComponent = HomePage

        return (<Navigator
            initialRoute={{ name: defaultName, component: defaultComponent }}
            configureScene={(route)=> {
                return Navigator.SceneConfigs.HorizontalSwipeJump;
            }}
            renderScene={(route,navigator)=>{
                let InitComponent = route.component;
                return <InitComponent {...route.params} navigator={navigator}/>
            }}
        />)
    }
    

    }

    在 pages/home.js 中 const {navigator} = this.props,拿到的 navigator 是 undefined,求助


  • administrators

    多半是因为你在home.js中调用const {navigator} = this.props的方法没有绑定this



  • const {navigator} = this.props 这行代码所在函数已经在 constructor 中单独绑定 this 了,我打印 this.state 都正常,偏偏 props 里面就是空的


  • administrators

    还是把代码贴一下吧 home.js



  • 此回复已被删除!


  • 要怎么贴图啊....这么大段大段的代码贴上来看得清吗



  • export default class HomePage extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            listSource: new ListView.DataSource({rowHasChanged: (r1, r2)=> r1 !== r2}).cloneWithRows(this._genRows({}))
        }
    
        this._renderRow = this._renderRow.bind(this)
        this._selectJob = this._selectJob.bind(this)
    }
    
    _selectJob(job: Object) {
        const {navigator} = this.props
    
        console.log('into _selectJob with navigator', JSON.stringify(navigator))
    
        Alert.alert( '提示', '正在开发中...' + JSON.stringify(this.props), [ {text: '确定', onPress: () => console.log('into _selectJob Ok!')} ])
    
        if (navigator) {
            navigator.push({
                name: 'HomeJobDetail',
                component: HomeJobDetail,
                params: {job: job}
            })
        }
    }
    
    _renderRow(jobData) {
        return (<HomeJobCell onSelect={()=> this._selectJob(jobData)} jobData={jobData}/>)
    }
    
    _genRows(): Array<string> {
        return JobData
    }
    
    render() {
        let resultList = <ListView
            dataSource={this.state.listSource}
            renderRow={this._renderRow}/>
    
        return (
            <View style={styles.container}>
                <SearchBar />
                {resultList}
            </View>
        )
    }
    

    }

    job-cell.js

    export default class JobCell extends Component {

    constructor(props) {
        super(props)
        this.state = {}
    }
    
    render() {
        let {jobData} = this.props
    
        return (
            <TouchableOpacity
                onPress={this.props.onSelect}
                underlayColor='#F5FCFF'>
                <View style={{backgroundColor: '#FFF'}}>
                    <View style={{padding: 10, flexDirection: 'row'}}>
                        <Image style={styles.size} source={{uri:  jobData.logo}}/>
                        <View style={{flex: 2, paddingLeft:  10}}>
                            <Text style={{fontSize: 16}}>{jobData.title}</Text>
                            <Text style={{marginTop: 8, marginBottom: 8}}>{jobData.company}</Text>
                            <Text style={{color: '#999'}}>{jobData.info}</Text>
                        </View>
                        <View style={{flex: 1, paddingLeft: 10}}>
                            <Text style={{color: '#999', textAlign: 'right'}}>{jobData.date}</Text>
                            <Text style={{marginTop: 8, color:'red', textAlign: 'right'}}>{jobData.salary}</Text>
                        </View>
                    </View>
                    <View style={{padding: 10, flexDirection: 'row'}}>
                        <Text style={styles.companyTag}>{jobData.companyPosition}</Text>
                        <Text style={styles.companyTag}>{jobData.companyPerson}</Text>
                        <Text style={styles.companyTag}>{jobData.companyService}</Text>
                    </View>
                    <View style={styles.separator}/>
                </View>
            </TouchableOpacity>
        )
    }
    

    }


  • administrators

    代码看起来没有问题,具体log的输出呢?
    你可以直接在回帖区域上传图片



  • @sunnylqm 多谢,我已经找到问题原因了,我的逻辑比较特殊,在引用 HomePage 之前就有用到 navigator,但在渲染 HomePage 的时候忘传过来了.


登录后回复