App.js

Question

我无法通过简单的按钮浏览屏幕。这是我的App.js

export default class App extends Component<Props> {
  render() {
    return (
      <AppStackNavigator/>
    );
  }
}
const AppStackNavigator = StackNavigator({
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen },

      },{
        navigationOptions: {
          gesturesEnabled:false
        }
      })

Login.js

export default class Login extends Component {
    render() {
        return(
            <SafeAreaView style={styles.container}>
                <StatusBar barStyle='light-content'/>
                <KeyboardAvoidingView behavior='padding' style={styles.container}>
                    <TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
                    <View style={styles.logoContainer}>
                        <View style={styles.logoContainer}>
                        <Image style={styles.logo}
                            source={require('../images/logo/logo.png')}>
                        </Image>
                        <Text style={styles.title}>
                            Sports Chat App
                        </Text>
                        </View>
                        <View style={styles.infoContainer}>
                            <TextInput style={styles.input}
                                placeholder="Enter name"
                                placeholderTextColor='#ffffff'
                                keyboardType='default'
                                returnKeyType='next'
                                autoCorrect={false}
                                onSubmitEditing={()=> this.refs.phoneNumber.focus()}
                                />
                            <TextInput style={styles.input}
                                placeholder="Enter phone number"
                                placeholderTextColor='#ffffff'
                                keyboardType='phone-pad'
                                ref={'phoneNumber'}
                                />
                                <TouchableOpacity style={styles.buttonContainer}>
                                <Button title='LogIn' onPress={()=>this.props.navigation.navigate('Home')}/>
                                </TouchableOpacity>
                        </View>
                    </View>
                    </TouchableWithoutFeedback>
                </KeyboardAvoidingView>
            </SafeAreaView>
        )
    }
};

LoginScreen.js

class LoginScreen extends Component {
    render(){
        return (

            <View>
            <Login>
            </Login>
            </View>
        );
    }
}

每当我尝试使用Login.js中的“登录”按钮时，我都会不断得到未定义的错误，而不是一个对象（评估'_this2.props.navigation.navigate'），我希望它导航到主屏幕，但无法弄清为什么这种情况一直在发生。如果我尝试不使用任何组件，则可以正常工作。

Click to View error message

Answer 1

在Login中的LoginScreen.js上添加导航道具，因为LoginScreen有道具navigation但Login没有。

   render(){
        return (
            <View>
                <Login navigation ={this.props.navigation}>
                </Login>
            </View>
        );
    }

Answer 2

App.js

import React, { Component } from "react";
import { Text, View } from "react-native";
import AppStackNavigator from "./AppStackNavigator";

export default class App extends Component<Props> {
  render() {
    return <AppStackNavigator />;
  }
}

AppStackNavigator

    import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import { View, Text, TouchableOpacity } from "react-native";

const LoginScreen = props => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Login navigation={props.navigation} />
  </View>
);

const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Home</Text>
  </View>
);

const Login = props => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <TouchableOpacity
      onPress={() => {
        props.navigation.navigate("Home");
      }}
    >
      <Text>GO to home from login</Text>
    </TouchableOpacity>
  </View>
);

export default (AppStackNavigator = StackNavigator(
  {
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen }
  },
  {
    headerMode: "none",
    navigationOptions: {
      gesturesEnabled: false
    }
  }
));

Answer 3

您需要访问组件中的导航道具。查看官方指南。

reactnavigation Official guide

   <div ng-controller = "controller">
     <img ng-src="{{tempimagefilepath}}" />
   </div>

undefined不是对象（评估'_this2.props.navigation.navigate'）-React Native

3 个答案:

App.js

AppStackNavigator