react-native - 如何使用 react-native-navigation 在屏幕之间正确导航?
问题描述
在我的 react-native 应用程序中,我有一个登录屏幕和一个主屏幕。逻辑是:登录过程(使用 Firebase)成功,并且我们有一个“用户”对象,我们要从登录屏幕导航到主屏幕。当我尝试实现此功能时,auth / log-in 部分工作正常,但“navigation.navigate”部分会导致此错误:
“TypeError:未定义不是对象(评估'navigation.navigate')”。
这是我的 App.js:
import React, { useEffect, useState } from 'react';
import { Navigation } from 'react-native-navigation';
import LoginScreen from './src/screens/LoginScreen/LoginScreen';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Button
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App = (props) => {
return (
<View style={styles.root}>
<LoginScreen />
</View>
);
};
App.options = {
topBar: {
title: {
text: 'Home',
color: 'white'
},
background: {
color: '#4d089a'
}
}
}
Navigation.registerComponent('Home', () => App);
Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'Home'
}
}
]
}
}
});
});
const styles = StyleSheet.create({
root: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'whitesmoke'
}
});
export default App;
这是我的登录屏幕,其中有这个导致错误的部分:
navigation.navigate('Home', {user: user})
:
import React, { useState, useEffect } from 'react'
import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styles from './styles';
import { firebase } from '../../firebase/config'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
export default function LoginScreen({ navigation }) {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [loading, setLoading] = useState(true)
const [user, setUser] = useState(null)
const Stack = createStackNavigator()
useEffect(() => {
const usersRef = firebase.firestore().collection('users');
firebase.auth().onAuthStateChanged(user => {
if (user) {
usersRef
.doc(user.uid)
.get()
.then((document) => {
const userData = document.data()
setLoading(false)
setUser(userData)
})
.catch((error) => {
setLoading(false)
});
} else {
setLoading(false)
}
});
}, []);
const onFooterLinkPress = () => {
navigation.navigate('Registration')
}
const onLoginPress = () => {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then((response) => {
const uid = response.user.uid
const usersRef = firebase.firestore().collection('users')
usersRef
.doc(uid)
.get()
.then(firestoreDocument => {
if (!firestoreDocument.exists) {
alert("User does not exist anymore.")
return;
}
const user = firestoreDocument.data()
navigation.navigate('Home', {user: user})
})
.catch(error => {
alert(error)
});
})
.catch(error => {
alert(error)
})
}
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{ flex: 1, width: '100%' }}
keyboardShouldPersistTaps="always">
<Image
style={styles.logo}
source={require('../../../assets/icon.png')}
/>
<TextInput
style={styles.input}
placeholder='E-mail'
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder='Password'
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity
style={styles.button}
onPress={() => onLoginPress()}>
<Text style={styles.buttonTitle}>Log in</Text>
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
</View>
</KeyboardAwareScrollView>
</View>
)
}
在这种情况下处理导航的正确方法是什么?
解决方案
根据此链接 ,您正在尝试将 App 组件注册为导航容器中的“主”屏幕。我不认为那是你想要的。
Navigation.registerComponent('Home', () => App);
您还需要注册您的主屏幕,否则您将无法导航到它。您的 App 组件将自动注入导航道具,因此您只需将其传递给 Login 组件。尝试以下操作:
const App = (props) => {
return (
<View style={styles.root}>
<LoginScreen ...props/>
</View>
);
};
App.options = {
topBar: {
title: {
text: 'Home',
color: 'white'
},
background: {
color: '#4d089a'
}
}
}
Navigation.registerComponent('Login', () => App);
Navigation.registerComponent('Home', () => YourHomeComponent);
推荐阅读
- python-3.x - 我的程序生成 50 个随机数,第一个数字介于 1 和 2 之间,第二个介于 1 和 3 之间……最后一个介于 1 和 50 之间
- image-processing - Canny过滤器和像素之间的距离测量
- r - load() 和 source() 在打开 RData 文件时抛出错误
- javascript - 如何使用 HTML/JS 中的按钮将来自 Anchor 的 href 链接复制到剪贴板?
- python - 在 Azure Blob 存储中设置文件上传限制
- zend-framework - 在 EasyPHP Devserver v17 上安装 Ioncube 的正确方法?
- r - 如何生成随机数据以在 R Markdown 的一个样本 t 检验中使用?
- java - 错误的输出来自 JNA 中的结构字段值
- google-apps-script - 谷歌脚本将元素附加到 HTML 文档
- r - 如何从矩阵中提取 2 个成对向量?