反应本机导航不按按钮切换屏幕

Question

I am trying to go from one screen to the next in my react-native application but nothing is happening when the button is selected. I am using a Stack Navigation and from all other research I have done it seems as though my pages are setup correctly please let me know if you see any problems.

Root Stack

 import React from 'react' import {createSwitchNavigator} from 'react-navigation' import AuthNavigator from './stacks/AuthNavigator' /** * This document handles manging the switch navigatiors for the supplied stacks * This means that each navigator mentioned in this file contains other navigators in their files */ const RootStack = createSwitchNavigator( { Auth: AuthNavigator }, { initialRouteName: 'Auth' } ) export default RootStack

AuthNavigator.JS

 import React from 'react' import {createStackNavigator} from 'react-navigation-stack' import LoginSignUpView from '../../../src/page/account/LoginSignUpView' import SignUpView from '../../../src/page/account/SignUpView' const AuthNavigator = createStackNavigator( { "LoginSignUpView": LoginSignUpView, "SignUpView": SignUpView, }, { initialRouteName: "LoginSignUpView" } );

LoginSignupView (With Button Not Working)

 import React, {Component} from 'react' import {View, ScrollView, Text, Image} from 'react-native' import LaunchOptions from '../../components/applaunch/LaunchOptions' import LaunchButtonStyle from '/Users/Documents/Mobile Applications/src/styles/Launch/LaunchButtonsStyle.styles.js' import LaunchButton from '../../components/applaunch/LaunchButton' import ImageStylesStyles from '../../styles/common/ImageStyles.styles' /** * This page allows a user to have the option to login or sign up to the application * This page is the main controller of the Login/SignUp View... All components should be placed here. * User will look at this view */ class LoginSignUpView extends Component { // NEED TO CHANGE NAVIGATION BAR COLOR -- CHECKOUT HOW BOOKIT IS DOING THIS static navigationOptions = { title: 'The Plug ', headerStyle: {backgroundColor: 'black'}, headerTitleStyle: {color: 'white', fontFamily: 'Impact', fontSize: 30}, }; render(){ return( <ScrollView style= {{backgroundColor: 'black'}}> <View> <Image source = {require('../../Images/FontSearch.png')} style = {ImageStylesStyles.logoDefaultStyle} /> <LaunchOptions text={'Create Account'} //-----------------------BUTTON NOT WORKING HERE VVVVV onPress={() => this.props.navigation.navigate("SignUpView")} buttonStyle={LaunchButtonStyle.largeRoundBtn} textStyle={LaunchButtonStyle.textStyle} /> </View> <View style={{ borderBottomColor: 'white', borderBottomWidth: 1,marginTop: 40 }} /> <View> <LaunchButton text={"Already have an account? Login"} onPress={"props.OnPress"} textStyle={LaunchButtonStyle.smallLgnSignupBtnTextStyle} /> </View> </ScrollView> ) } } export default LoginSignUpView

LaunchOptions:

 import React from 'react' import {View, Text, ScrollView} from 'react-native' import launchTextStyle from '/Users/Documents/Mobile Applications/ThePlugNetwork/src/styles/loginSignUpTextStyle.styles.js' import Button from '/Users/Documents/Mobile Applications/src/components/common/Button.js' /** * Application Launch View for user to select to login or signup * * @param {*} props */ const LaunchOptions = (props) => { return( <ScrollView> <View> <Text style={launchTextStyle.bigTextTop}>Stay</Text> <Text style={launchTextStyle.bigText}>Connected</Text> <Text style={launchTextStyle.mediumText}>With The Latest</Text> <Text style={launchTextStyle.smallText}>Government Updates</Text> </View> <View> <Button onPress={props.OnPress} buttonStyle={props.buttonStyle} textStyle={props.textStyle} > {props.text} </Button> </View> </ScrollView> ) } export default LaunchOptions

Answer 1

I found an error in your code. You are passing "onPress" function to LaunchOptions component as a prop but you are calling "props.OnPress" instead you should call "props.onPress"

Suggestion: you should declare a constructor in the LoginSignupView screen like this

constructor(props){
   super(props)
}