2
Navigatorを使用して、親コンポーネントから子コンポーネントに移動しています。ナビゲータは正しく動作し、子コンポーネントのレンダリングメソッドを正常に実行します。しかし、何も画面に表示されません。ナビゲータに子コンポーネントが表示されない
子コンポーネントを表示できないナビゲータには何が欠けていますか？
私はテストナビゲータに同様のコードを使用していますが、子コンポーネントを表示できました。あなたがナビゲーターからflex:1スタイル属性でstyle={styles.container}を削除する必要があります。ここ
は、親ビュー
'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;
ためのコードであると、子プロファイルビューのコードはここにある、
'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;