子组件将无法从函数中呈现

Question

我正在尝试使用函数renderHowManyAlcohol()渲染子组件

组件LYDSelectNumber无法渲染，正确的道具正在传递，为什么不渲染？

  render() {
    return (
      <Flexible>
        <LYDSceneContainer
          goBack={this.props.goBack}
          subSteps={this.props.subSteps}>
          <Flexible>
            {this.renderHowManyAlcohol()}
          </Flexible>
        </LYDSceneContainer>
      </Flexible>
    );
  }

  renderHowManyAlcohol() {
    return (
      <View style={styles.HowManyAlcoholContainer}>
        <Text>this renders</Text>
        // this component below doesn't 
        <LYDSelectNumber
          selectedNumberValue={this.props.selectedNumberValue}
          onChangeNumber={this.props.onChangeNumber}
        />
      </View>
    );
  }

LYDSelectNumber组件styles.container显示为数字“ 60”，这很奇怪，我在页面底部有样式。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Picker, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import * as theme from '../../../theme';

const Item = Picker.Item;

export const SelectedNumber = ({ value = 0, displayPicker = () => {} } = {}) =>
  <TouchableOpacity onPress={displayPicker}>
    <View style={styles.centerWrap}>
      <View style={styles.selectedNumberWrap}>
        <Text style={styles.selectedNumberText}>
          {value}
        </Text>
      </View>
    </View>
  </TouchableOpacity>;

class LYDSelectNumber extends Component {
  static propTypes = {
    onChangeNumber: PropTypes.func.isRequired,
    numbersRange: PropTypes.array,
    style: PropTypes.any,
    selectedNumberValue: PropTypes.number,
  };

  static defaultProps = {
    numbersRange: [18, 120],
    style: undefined,
    selectedNumberValue: undefined,
  };

  render() {
    return (
      <View style={styles.container}>
        <SelectedNumber value={this.props.selectedNumberValue} />
        <Picker
          style={styles.picker}
          selectedValue={this.props.selectedNumberValue}
          onValueChange={this.props.onChangeNumber}>
          {this._renderNumbers()}
        </Picker>
      </View>
    );
  }

  _renderNumbers = () => {
    const [firstNumber, lastNumber] = this.props.numbersRange;

    let numbersItems = [];
    let n = firstNumber;
    while (n <= lastNumber) {
      numbersItems.push(<Item key={n} label={`${n}`} value={n} />);
      n++;
    }

    return numbersItems;
  };
}

export default LYDSelectNumber;

const styles = StyleSheet.create({
  container: {
    flex: 3,
    justifyContent: 'center',
    alignItems: 'center',
  },
  picker: {
    position: 'absolute',
    top: 0,
    width: 1000,
    height: 1000,
  },
  centerWrap: {
    alignItems: 'center',
  },
  selectedNumberWrap: {
    width: theme.utils.responsiveWidth(40),
    paddingBottom: 20,
    borderBottomWidth: 2,
    alignItems: 'center',
    borderBottomColor: theme.colors.darkGranate,
  },
  selectedNumberText: {
    ...theme.fontStyles.selectedNumber,
  },
});