2
Ich verwende Navigator, um von einer übergeordneten Komponente zu einer untergeordneten Komponente zu wechseln. Der Navigator funktioniert ordnungsgemäß und führt die Rendermethode der untergeordneten Komponente erfolgreich aus. Aber nichts wird auf dem Bildschirm angezeigt.Navigator zeigt die untergeordnete Komponente nicht an
Was fehlt mir im Navigator, dass ich die untergeordnete Komponente nicht anzeigen kann?
Ich habe ähnlichen Code für einen Test-Navigator verwendet, und ich konnte die untergeordnete Komponente anzeigen. Hier
ist der Code für die übergeordnete Ansicht
'use strict';
import React, {Component} from 'react';
import {
Navigator,
StyleSheet,
} from 'react-native';
var Profile = require('./Profile');
var UpdateVehicles = require('./UpdateVehicles');
var ROUTES = {
'profile': Profile,
'updateVehicles': UpdateVehicles,
};
class ProfileBase extends Component {
constructor(props){
super(props);
}
render() {
return (
<Navigator
style={styles.container}
initialRoute={{name:'profile'}}
renderScene={this.renderScene.bind(this)}/>
);
}
renderScene(route, navigator) {
var Mycomponent = ROUTES[route.name];
return <Mycomponent route={route} navigator={navigator}/>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
module.exports = ProfileBase;
Und Code des Kind Profil Ansicht der ist hier,
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
var Parse = require('parse/react-native');
var Button = require('./Button');
class Profile extends Component {
constructor(props) {
super(props);
this.state = {
username: "default",
userEmail: "",
licensePlate: [],
registeredState: [],
};
}
componentWillMount() {
var currentUser = Parse.User.current();
var userJSON = JSON.stringify(currentUser);
var userinfo = eval ("(" + userJSON + ")");
this.setState({username: userinfo.username});
this.setState({userEmail: userinfo.email});
var vehicle = Parse.Object.extend("Vehicle");
var query = new Parse.Query(vehicle);
query.equalTo("userEmail", userinfo.email);
query.find({
success: (results) => {
for (var i = 0; i < results.length; i++) {
var object = results[i];
this.setState({
licensePlate: this.state.licensePlate.concat([object.get('licensePlate')]),
registeredState: this.state.registeredState.concat([object.get('registeredState')]),
});
}
},
error: (error) => {
console.log("Error: " + error.code + " " + error.message);
}
});
}
render() {
console.log("reached");
const { page } = this.state;
return (
<View style={styles.container}>
<Text style={styles.titleContainer}>
Hi! {this.state.username}
</Text>
<Text style={styles.titleContainer}>
Your registered vehicles are,
</Text>
{this.displayCars()}
<Button text="Edit vehicles" onPress={this.updateVehicleInfo.bind(this)}/>
</View>
);
}
displayCars() {
return this.state.licensePlate.map((str,index) => {
return (<View><Text style={styles.titleContainer}>Vehicle {index+1}: {str}</Text></View>);
})
}
updateVehicleInfo() {
this.props.navigator.push({name: 'updateVehicles'});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
titleContainer: {
fontSize: 20,
fontFamily: 'Helvetica',
marginBottom: 20,
},
});
module.exports = Profile;