我的登录按钮无法导航到SignUpForm

时间：2018-09-16 22:46:19

标签： reactjs react-native react-redux react-router stack-navigator

我的Account.js里面是我的登录表单，其中显示了我的登录表单。但是，当用户按下“注册”按钮时，应该显示“注册”屏幕，但是什么也没有发生。该按钮正常工作，并且我没有任何错误，因此，为什么在按下按钮后没有显示我的“注册”屏幕。有人可以告诉我该怎么做并解释原因吗？

LoginForm.js 

import React, { Component } from 'react';
import { TextInput, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button, CardSection, Input, Spinner } from './common';
import Account from './screens/Account';
import SignUpForm from './SignUpForm';
import router from '../config/router';

const AccountStack = StackNavigator({
  Account: {
    screen: Account,
    navigationOptions: {
    title: 'Account',
    headerBackTitle: null,
  },
},
  SignUpForm: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Register'
    },
  },
});
class LoginForm extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Username or email"
          placeholderTextColor='white'
          returnKeyType='next'
          style={styles.input}
          keyboardType="email-address"
          onSubmitEditing={() => this.passwordInput.focus()}
        />

        <TextInput
          secureTextEntry //turns text into *** good for passwords
          label="Password"
          placeholder="password"
          placeholderTextColor='white'
          secureTextEntry
          returnKeyType='go'
          style={styles.input}
          ref={(input) => this.passwordInput = input}
        />
      <TouchableOpacity style={styles.buttonContainer}>
          <Text style={styles.buttonText}>LOGIN</Text>
        </TouchableOpacity>
        <Text style={styles.textStyle}> Need help logging in?{'\n'}
          or
        </Text>
        <View style={styles.divider} />
      <TouchableOpacity
        navigation={this.props.navigation}
        style={styles.buttonContainer}
        onPress={() => this.props.navigation.navigate('SignUpForm')}
      >
          <Text style={styles.buttonText}>Sign Up</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  input: {
    height: 40,
   backgroundColor: '#FCD183',
    marginBottom: 10,
    color: 'white',
    paddingHorizontal: 10,
    borderRadius: 10
  },
    buttonContainer: {
      backgroundColor: '#FCBA12',
      paddingVertical: 15,
      marginBottom: 10,
      borderRadius: 10
  },
    divider: {
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    marginTop: 10,
    marginBottom: 10
  },
    buttonText: {
      textAlign: 'center',
      color: 'white'

    },
    textStyle: {
      color: 'white',
      textAlign: 'center',
      marginTop: 10,
      marginBottom: 10
    }
});

export default LoginForm;

Account.js： 

        import React from 'react';
    import { View, Image, TouchableOpacity, Text, TextInput } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import { Card, Button, Spinner, CardSection } from '../common';
    import LoginForm from '../LoginForm';
    import router from '../../config/router';

    class Account extends React.Component {
      static navigationOptions = {
        tabBarLabel: 'Account'
      }
      render() {
        return (<View style={styles.containerStyle}>
          <Card>
            <View style={styles.logoContainer}>
              <Image style={styles.logo} source={require('../../Images/ShoeJackCityLogo.png')}/>
            </View>
            <View style={styles.formContainer}>
              <LoginForm
                navigation={this.props.navigation}
                  onPress={() => this.props.navigation.navigate('SignUpForm')}
              />
            </View>
          </Card>
        </View>);
      }
    }

    const styles = {
      containerStyle: {
        flex: 1,
        backgroundColor: '#F13C20',
        paddingBottom: 20
      },
      logoContainer: {
        alignItems: 'center',
        flexGrow: 1,
        justifyContent: 'flex-start',
        paddingBottom: 0
      },
      logo: {
        paddingTop: 15,
        width: 200,
        height: 200
      },
      registerContainer: {
        padding: 20
      },
      input: {
        height: 40,
        backgroundColor: '#FCD183',
        marginBottom: 10,
        color: 'white',
        paddingHorizontal: 10,
        borderRadius: 10
      },
      buttonContainer: {
        backgroundColor: '#FCBA12',
        paddingVertical: 15,
        marginBottom: 10,
        borderRadius: 10
      },
      divider: {
        borderBottomColor: 'black',
        borderBottomWidth: 1,
        marginTop: 10,
        marginBottom: 10
      },
      buttonText: {
        textAlign: 'center',
        color: 'white'

      },
      textStyle: {
        color: 'white',
        textAlign: 'center',
        marginTop: 10,
        marginBottom: 10
      }
    };

    export default Account;

SignUpForm.js： 

    import React, { Component } from 'react';
import { TextInput, Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Button, CardSection, Input, Spinner } from './common';


class SignUpForm extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Username or email"
          placeholderTextColor='white'
          returnKeyType='next'
          style={styles.input}
          keyboardType="email-address"
          onSubmitEditing={() => this.EmailInput.focus()}
        />

        <TextInput
          placeholder="Email"
          placeholderTextColor='white'
          returnKeyType='next'
          style={styles.input}
          keyboardType="email-address"
          onSubmitEditing={() => this.passwordInput.focus()}
        />


        <TextInput
          secureTextEntry //turns text into *** good for passwords
          label="Password"
          placeholder="password"
          placeholderTextColor='white'
          secureTextEntry
          returnKeyType='go'
          style={styles.input}
          ref={(input) => this.passwordInput = input}
        />
      <TouchableOpacity style={styles.buttonContainer}>
          <Text style={styles.buttonText}>Register</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  registerContainer: {
    padding: 20
  },
  input: {
    height: 40,
   backgroundColor: '#FCD183',
    marginBottom: 10,
    color: 'white',
    paddingHorizontal: 10,
    borderRadius: 10
  },
    buttonContainer: {
      backgroundColor: '#FCBA12',
      paddingVertical: 15,
      marginBottom: 10,
      borderRadius: 10
  },
    divider: {
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    marginTop: 10,
    marginBottom: 10
  },
    buttonText: {
      textAlign: 'center',
      color: 'white'

    },
    textStyle: {
      color: 'white',
      textAlign: 'center',
      marginTop: 10,
      marginBottom: 10
    }
});

export default SignUpForm;

Router.js 

import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import LoginForm from '../components/LoginForm';
import Tournaments from '../components/screens/Tournaments';
import Account from '../components/screens/Account';
import Artists from '../components/screens/Artists';
import Shop from '../components/screens/Shop';
import SignUpForm from '../components/SignUpForm';

export const AccountStack = StackNavigator({
  Account: {
    screen: Account,
    navigationOptions: {
    title: 'Account',
    headerBackTitle: null,
  },
  SignUpForm: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Register'
    }
  },
  },
  Tournaments: {
    screen: Tournaments,
    navigationOptions: {
      title: 'Tournaments',
      headerBackTitle: null,
      headerBackButton: null
    },
  },
  LoginForm: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login',
      headerBackTitle: null,
      headerBackButton: null
    },
  },
  Artists: {
    screen: Artists,
    navigationOptions: {
      title: 'Artists',
      headerBackTitle: null,
      headerBackButton: null
    },
  },
  Shop: {
    screen: Shop,
    navigationOptions: {
      title: 'Shop',
      headerBackTitle: null,
      headerBackButton: null
    },
  },
});
export const Tabs = TabNavigator({
  Account: {
      screen: AccountStack,
      navigationOptions: {
          tabBarlabel: Account,
          tabBarIcon: ({ tintColor }) => <Icon
          name="account-circle"
          size={35}
          color={tintColor}
          renderBackButton={() => (null)}
          />
        }
      },
  Tournaments: {
    screen: Tournaments,
    navigationOptions: {
      tabBarLabel: Tournaments,
      tabBarIcon: ({ tintColor }) => <Icon
        name="tournament"
        size={35}
        color={tintColor}
        renderBackButton={() => (null)}
      />

    }
 },
 Shop: {
   screen: Shop,
   navigationOptions: {
     tabBarLabel: Shop,
       tabBarIcon: ({ tintColor }) => <Icon
       name="shopping-bag"
       size={35}
       color={tintColor}
       renderBackButton={() => (null)}
       />

   }
 },
 Artists: {
   screen: Artists,
   navigationOptions: {
     tabBarLabel: Artists,
       tabBarIcon: ({ tintColor }) => <Icon
       name="shopping-bag"
       size={35}
       color={tintColor}
       renderBackButton={() => (null)}
       />
   }
}
});

1 个答案:

答案 0 :(得分：0)

您需要使用withNavigation注入导航。在这种情况下，请尝试将其注入LoginForm。

相关问题
最新问题