React Native:使用导航器时'undefined不是函数'

时间:2017-07-21 11:26:15

标签: javascript reactjs react-native

我正在尝试制作一个带有2个面板的应用程序,一个带有我的用户输入,另一个带有输出(它是所有日期,并不重要)。 我正在使用导航仪。我的“主要”课程是:

export default class App extends Component {
onDateChange = (state) => (event,value) => {
    this.setState({
        [state]:value
    });
}

render () {
    return (
        <Navigator
            initialRoute={{id: 'mainPage', name: 'main'}}
            renderScene={this.renderScene.bind(this)}
            configureScene={(route) => {
                if (route.sceneConfig) {
                    return route.sceneConfig
                }
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
        }}/>
    );
}

renderScene ( route, navigator ) {
    var routeId = route.id;
    if (routeId === 'mainPage') {
        return (
            <mainPage
                navigator={navigator}/>
        );
    }
    if (routeId === 'calcPage') {
        return (
            <calcPage
                navigator={navigator}/>
        );
    }
}
}

它加载的第一页看起来像:

class mainPage extends Component {
componentWillMount () {
    var navigator = this.props.navigator;
}

constructor(props) {
    super(props)
    this.state = {
        dayMes: "",
        monthMes: "",
        yearMes: "",
        dayLast: "",
        monthLast: "",
        yearLast: "",
        dayInit: "",
        monthInit: "",
        yearInit: "",
    }
}

render() {
    return (
        <ScrollView>
        <View style={{
            justifyContent: 'center',
        }}>
            <View style={{
                    height: 40,
                    justifyContent: 'center',
                    borderTopWidth: 25,
                    backgroundColor: 'white'
            }}/>

            </View>

 LOTS of textInputs ...

            <TouchableOpacity onPress={ () => { navigator.replace({ id: 'calcPage' }); } }>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>Calculer</Text>
                </View>
            </TouchableOpacity>
        </View>
        </ScrollView>
    )
}
}

当我按下按钮时,它会给我一个错误undefined is not a function (evaluating 'navigator.replace({id: 'calcPage'})')。我猜问题是它触发的功能,但我不知道在哪里。 calcPage类与第一个类相同,因为我还在测试。

感谢您的帮助!

编辑:

import React, {Component} from 'react';
import DatePicker from 'react-native-datepicker';
import { AppRegistry, View, Image, Text, TextInput, StyleSheet, Alert, Button, TouchableOpacity, ScrollView, Navigator } from 'react-native';

我的进口

0 个答案:

没有答案