Question

我试图去从一个屏幕到我的反应本地应用程序的未来，但在选择按钮时，什么也没有发生。我正在使用堆栈导航，从我做过的所有其他研究来看，我的页面似乎设置正确，如果发现任何问题，请告诉我。

根堆栈

    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（按钮不起作用）

  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

启动选项：

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

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

1 个答案: