如何在 React Native 上的屏幕之间导航？

Question

I'm working on this app for my family and so far i got everything up and running, but now I'm facing this issue because I want to load another view with onPress() , but I can't figure what my error is.

This is my code

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {Text} from 'react-native-paper';
import {TextInput} from 'react-native-paper';
import AsyncStorage from '@react-native-community/async-storage';
import {Button} from 'react-native-paper';

const LoginScreen = () => {
  const [userId, setUserId] = useState('');
  const [loading, setLoading] = useState(false);

  const onLogin = async () => {
    setLoading(true);
    try {
      await AsyncStorage.setItem('userId', userId);
      setLoading(false);
      this.navigation.push('Call');
    } catch (err) {
      console.log('Error', err);
      setLoading(false);
    }
  };

  return (
    <View style={styles.root}>
      <View style={styles.content}>
        <Text style={styles.heading}>Enter your name</Text>
        <TextInput
          label="Name"
          onChangeText={text => setUserId(text)}
          mode="outlined"
          style={styles.input}
        />

        <Button
          mode="contained"
          onPress={onLogin}
          loading={loading}
          style={styles.btn}
          contentStyle={styles.btnContent}
          disabled={userId.length === 0}>
         Connect
        </Button>
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  root: {
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
  },
  content: {
    paddingHorizontal: 20,
    justifyContent: 'center',
  },
  heading: {
    fontSize: 18,
    marginBottom: 10,
    fontWeight: '600',
  },
  input: {
    height: 60,
    marginBottom: 10,
  },
  btn: {
    height: 60,
    alignItems: 'stretch',
    justifyContent: 'center',
    fontSize: 18,
  },
  btnContent: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 60,
  },
});
export default LoginScreen(props);

Basically, everytime I press the button, I want my function onLogin() to navigate to my other file and load, but this is What I get.

[Wed Jun 10 2020 19:32:41.934]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:32:42.951]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:32:46.182]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:32:46.517]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:32:46.820]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:32:47.733]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:32:48.500]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:33:02.840]  LOG      Error [ReferenceError: Can't find variable: props]
[Wed Jun 10 2020 19:33:05.786]  LOG      Error [ReferenceError: Can't find variable: props]

Any ideas on what I'm doing wrong or can anyone point me out on where to go with this.

Answer 1

Remove props from the export. props will be passed automatically into the component by react. The issue here is that you are calling LoginScreen with props, and props doesn't actually exist outside of the scope of LoginScreen

So instead have export default LoginScreen

Additionally, add props to the function definition of LoginScreen so it becomes: const LoginScreen = (props) => {... }

Then wherever you have the login screen instantiated use <LoginScreen **ADD ANY PROPS YOU WANT TO ADD HERE** />