Question

大家好，我正在尝试导航到其他屏幕时收到此消息我读到了这个消息错误，但我找不到分辨率

我尝试使用导航（“主页”）; this.navigation.navigate（ “家”）;和其他答案我已经阅读但我仍然得到相同的消息

我是新人的反应。

这是我的App.js

import React, { Component } from 'react';
import {AppRegistry,TouchableOpacity,StyleSheet,Text,TextInput,View,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { HomeScreen }  from "./src/screens/homeScreen";

export default class App extends Component
{
  render() 
  {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <TextInput style={styles.username}
          placeholder="Username"
          //onChangeText={(text) => this.setState({text})}
        />
        <TextInput style={styles.password}
          placeholder="Password"
          //onChangeText={(text) => this.setState({text})}
        />
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> Touch Here </Text>
        </TouchableOpacity>        
        <TouchableOpacity
          onPress = {() => { this.props.navigation.navigate("Home");}}> 

        <Text> Touch Heress </Text>     
        </TouchableOpacity>

      </View>

    );
  }
}
const RootStack = StackNavigator({
  Base: 
  {
    screen: App,
  },
  Home:
  {
    screen: HomeScreen,
    navigationOptions: {
      header: {
        visible: false
      }
    }
  }
},
{
  initialRouteName: "Base",
}
);
AppRegistry.registerComponent("Scheduled", () => RootStack);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 15,
    width: 150,
  },
  username:{
    alignItems: 'center',
    width: 300,
  },
  password:{
    alignItems: 'center',
    width: 300,
  },
  buttonSignUpUser: {
    padding: 15,
    left: -50,  
  },
  countText: {
    color: '#FF00FF',
  },
});

这是我的homeScreen.js

 import React, { Component } from 'react';
import { AppRegistry, TouchableOpacity, Platform, StyleSheet, Text, TextInput, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

export class HomeScreen extends Component{
    render() {
      const { navigate } = this.props.navigation;
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Details Screen</Text>
        </View>
      );
    }
  }

Answer 1

您必须将屏幕添加到Stack Navigator中。然后调用您可以通过您正在使用的方法导航到屏幕（存在于堆栈导航器中）。

创建一个如下所示的routes.js文件

export default StackNavigator({
  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  }
});

在App.js中导入此文件并返回

import Navigator from './path/to/routes.js';

render(){
  return(
    <View>
        <Navigator/>
    </View>
  );
}

现在应用程序开始打开Screen1。您可以在按下按钮的地方拨打以下代码。

this.props.navigation.navigate（ '屏蔽2'）

请更详细地阅读官方文档，youtube上还有很多教程。

undefined不是一个对象（评估_this2.props.navigation.navigate）react-navigate

1 个答案: