Question

我正在使用react-native的Navigator组件，但是当我想推送到anthor页面push undefined is not a function时仍然会出错，所以我的代码是

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Navigator,
    Text,
    TouchableHighlight
} from 'react-native';
import Home from './Home';
import Main from './Main';

class MainApp extends Component {


    _navigate(){
        this.props.navigator.push({
            name: Home
        })
    }


    render() {


        return (
        <View style={styles.container}>
            <TouchableHighlight onPress={ () => this._navigate() }>
                <Text>GO To View</Text>
            </TouchableHighlight>

        </View>


        );
    }
}

和Home组件

class Home extends Component {
    render() {

        return (
            <View style={styles.container}>
                <Text>Welcome Hello</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

});

export default Home;

我仍然会收到此错误，我是反应原生的初学者，请帮帮我吗？为什么反应本土如此努力？

Answer 1

经过几个小时的工作，我解决了我的问题首先我创建MainApp，然后使用initialRoute定义导航器，我的代码如下所示

class MainApp extends Component {
    renderScene(route, navigator) {
            console.log(route, navigator);
            if (route.component) {
                return React.createElement(route.component, { navigator });
            }
        }

        render() {
            return (
                <Navigator
                    initialRoute={{name: 'Home', component: Home}}
                    configureScene={() => {
                        return Navigator.SceneConfigs.FloatFromRight;
                    }}
                    renderScene={this.renderScene}
                />
            );
        }
}

在主屏幕后我使用此功能

   _navigate() {
        this.props.navigator.replace({
            name: 'Main',
            component: Main
        });
    }

所以现在我的项目运作良好，关键是创建一个屏幕路线希望它有用

Answer 2

所以！首先，RN不是那么难^^我两周前开始不用担心它会变得更容易！

如果你对它好的话，我会给你一个例子！

<强> MainApp

renderScene(route,nav) {
switch (route.screen) {
  case "LaunchScreen":
    return <LaunchScreen navigator={nav} />
  case "LoginScreen":
    return <LoginScreen navigator={nav} />
  case "ListBillScreen":
    return <ListBillScreen navigator={nav} />
  case "AddBillScreen":
    return <AddBillScreen navigator={nav} />
  case "BillScreen":
    return <BillScreen navigator={nav} bill={route.props}/>
  case "PersistanceDemo":
    return <PersistanceDemo navigator={nav} />
  }

}

render () {
 return (
   <Navigator
          initialRoute={{screen: 'LaunchScreen'}}
          renderScene={(route, nav) => {return this.renderScene(route, nav)}}
        />
      )
 }
}

您可以在mainApp中设置所有“路由”吗？

之后，如果您想在其他.js中的视图之间导航，则需要这样做：

this.props.navigator.push({ screen: 'AddBillScreen' });

您需要使用屏幕名称进行导航！完成后，您将很容易在您将看到的视图之间导航！

保持强大！

未定义的navigator.push React-native 0.43.4

2 个答案: