Ich habe ein Problem mit dem Navigator in React Native. Ich möchte zu einem anderen Bildschirm navigieren, wenn ich etwas Text drücke, aber ich bekomme einen seltsamen Fehler, ich bin mir nicht sicher, warum.Navigation in React Native
Hier sind meine Code-Blöcke und ein Bild des Fehlers, den ich erhalte.
'use strict'
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import ViewContainer from '../components/ViewContainer';
import StatusBarBackground from '../components/StatusBarBackground';
import AppNavigator from '../navigation/AppNavigator'
import UserIndexScreen from './UserIndexScreen'
class LoginIndexScreen extends Component {
render() {
return (
<ViewContainer>
<StatusBarBackground />
<View style={styles.textContainer}>
<Text style={styles.loginText}>Welcome to</Text>
<TouchableOpacity onPress={(event) => this._navigateToUserIndexScreen()}>
<Text style={styles.nextStep}>Press to go to User Index Screen</Text>
</TouchableOpacity>
</View>
</ViewContainer>
);
}
_navigateToUserIndexScreen() {
AppNavigator.props.push({
ident: "UserIndex"
})
}
}
const styles = StyleSheet.create({
textContainer: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
loginText: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 30
},
nextStep: {
marginTop: 80
}
});
module.exports = LoginIndexScreen;
Und hier ist der Navigator-Komponente.
'use strict'
import React, { Component } from 'react';
import { Navigator } from 'react-native';
import RegisterIndexScreen from '../screens/RegisterIndexScreen';
import LoginIndexScreen from '../screens/LoginIndexScreen';
import UserIndexScreen from '../screens/UserIndexScreen';
import PersonProfileScreen from '../screens/PersonProfileScreen';
class AppNavigator extends Component {
_renderScene(route, navigator) {
var globalNavigatorProps = { navigator }
switch(route.ident) {
case "RegisterIndexScreen":
return (
<RegisterIndexScreen {...globalNavigatorProps} />
)
case "LoginIndexScreen":
return (
<LoginIndexScreen {...globalNavigatorProps} />
)
case "UserIndex":
return (
<UserIndexScreen {...globalNavigatorProps} />
)
case "Temp":
return (
<Text>Hello</Text>
)
case "PersonProfileScreen":
return (
<PersonProfileScreen {...globalNavigatorProps}
person={route.person} />
)
default:
return (
<LoginIndexScreen {...globalNavigatorProps} />
)
}
}
render() {
return (
<Navigator
initialRoute={this.props.initialRoute}
ref="appNavigator"
renderScene={this._renderScene}
configureScene={(route) => ({...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight, })} />
);
}
}
module.exports = AppNavigator;
hier ist auch ein Bild von der Fehler Ich erhalte:
würde Irgendwelche Ideen sehr geschätzt werden!
Danke!
Danke für Ihre Hilfe. Ich bin etwas verwirrt mit dem, was Sie meinen, indem Sie das Navigator-Objekt in der Funktion _renderScene übergeben. Ich habe versucht, das in die renderScene-Funktion zu bringen, würde aber einen Fehler treffen. Könnten Sie das etwas weiter erklären? Vielen Dank! – Kaidao
Ihre Renderansicht-Funktion behandelt "was gerade auf dem Display angezeigt wird" (Szenen). In dieser Funktion geben Sie eine Ansicht zurück, die auf dem übergeordneten Stapel der Navigationsrouten basiert. Wenn Sie also LoginIndexScreen zurückgeben, sollten Sie (als Requisiten) eine Instanz des Navigator-Objekts übergeben (damit Sie es in gerenderten Szenen verwenden können). Die Navigator-Instanz ist ein Argument der renderScene-Funktion. – Moonjsit