如何在 React Native 上的屏幕之間導航？

Question

我正在為我的家人開發這個應用程序，到目前為止我已經啟動並運行了所有東西，但現在我遇到了這個問題，因為我想用onPress()加載另一個視圖，但我不知道我的錯誤是什么.

這是我的代碼

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

基本上，每次我按下按鈕時，我都希望我的 function onLogin()導航到我的其他文件並加載，但這就是我得到的。

[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]

關於我做錯了什么的任何想法，或者任何人都可以指出我在哪里使用這個 go。

Answer 1

從導出中刪除props 。 props 將通過 react 自動傳遞到組件中。 這里的問題是您正在使用道具調用LoginScreen ，而道具實際上並不存在於LoginScreen的 scope 之外

所以改為export default LoginScreen

此外，將props添加到LoginScreen的 function 定義中，使其變為： const LoginScreen = (props) => {... }

然后無論您在哪里實例化登錄屏幕，請使用<LoginScreen **ADD ANY PROPS YOU WANT TO ADD HERE** />