我正在React Native
应用程序中的组件之间进行导航,到目前为止,在我坚持此错误之前,一切工作都还不错。
这是我要浏览的最后一个组件,但是我不知道为什么我不能这样做,其他每个组件我都遵循相同的结构并且它们都起作用,但这是唯一一个不起作用的组件。
import React from 'react';
import {
StyleSheet,
View,
TouchableHighlight,
Button
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
const Icono = (props) => {
return(
<TouchableHighlight
underlayColor={'transparent'}
style={styles.icono}
onPress={() => props.navigation.navigate('Login')}>
<View>
<Icon name="video-call" color="#7796ff" size={35} />
</View>
</TouchableHighlight>
);
}
const styles = StyleSheet.create({
icono: {
paddingRight: 10,
paddingLeft: 10,
paddingTop: 17,
textAlign: 'center',
},
});
export default Icono;
这是我用来实现导航的代码。
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';
import {createStackNavigator} from '@react-navigation/stack';
const Stack = createStackNavigator();
const LoginScreen = (props) => {
const [userId, setUserId] = useState('');
const [loading, setLoading] = useState(false);
const onLogin = async () => {
setLoading(true);
try {
await AsyncStorage.setItem('userId', userId);
setLoading(false);
props.navigation.navigate('Call');
} catch (err) {
console.log('Error', err);
setLoading(false);
}
};
return (
<View style={styles.root}>
<View style={styles.content}>
<Text style={styles.heading}>Ingresa tu ID</Text>
<TextInput
label="id"
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}>
Conectar al servicio de video
</Button>
<Button
mode="contained"
onPress={props.navigation.navigate('Contacto')}
loading={loading}
style={styles.btn}
contentStyle={styles.btnContent}
disabled={userId.length === 0}>
Salir
</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;
这是我要导航的代码。值得一提的是,我正在使用react-navigation
,并且我所有的组件都包装在<NavigationContainer>
组件中,但是我不明白为什么导航中的所有其他组件都起作用,而这个组件不允许我这样做它。
根据您的代码,它是一个单独的组件,不属于导航堆栈的一部分
您可以通过两种方式解决此问题。
将导航作为来自栈的一部分的父项作为道具传递
<Icono navigation={this.props.navigation} />
使用icono内的useNavigation钩子并从那里调用它。