Question

我正在使用Navigator从父组件移动到子组件。导航器正常工作并成功执行子组件的render方法。但屏幕上没有显示任何内容。

我无法在导航器中看到我无法显示子组件的内容？

我在测试导航器中使用了类似的代码，我能够显示子组件。

以下是父视图的代码

'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;

Answer 1

您应该从导航器中删除style={styles.container}样式属性的flex:1。

请参阅我在此处制作的示例：https://rnplay.org/apps/guargQ

我用flex评论了这一行：1。如果将其重新添加，屏幕将变为空白。

导航器不显示子组件

1 个答案: