React Native Navigation在按下按钮时不能切换屏幕。

Question

我试图在我的react-native应用程序中从一个屏幕到下一个屏幕，但当按钮被选中时，没有任何事情发生。我使用的是堆栈导航，从我所做的所有其他研究来看，我的页面似乎是正确设置的，如果你看到任何问题，请告诉我。

根栈

    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

登录注册视图(有按钮不工作)

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"
        }
    );

登录注册视图(按钮不工作)

  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

我在你的代码中发现了一个错误。你在传递 "onPress" 函数，但你调用的是LaunchOptions组件中的一个道具。"props.OnPress" 相反，你应该叫 "props.onPress"

建议。你应该在LoginSignupView界面中声明一个构造函数，就像这样

constructor(props){
   super(props)
}