React Native：样式化DatePickerIOS组件

Question

我有一个组件Logitem.js，其中包含DatePickerIOS组件。

该组件按预期工作，但由于某种原因，datepicker组件的布局混乱，如下所示。

理想情况下，datepicker组件应位于顶部，然后是两个按钮（在datepicker组件和按钮之间有足够的空间）

Logitem.js代码

import React, { Component } from 'react';
import { Text, View, Modal, DatePickerIOS, TextInput, TouchableHighlight } from 'react-native';


export default class Logitem extends Component {


state = {
    //selecteddate: '1',
    selectedweight: this.props.weight,
    showmodal: false,
    selecteddate: new Date(86400000 * this.props.logdate),

  }

  componentDidMount() {
  console.log('State ==> '+this.state.selecteddate+' Logstring date ==> '+this.props.logstringdate);
}


  deleteSelectedRecord(){
    this.setState({ showmodal: false });
    this.props.invokedelete(this.state.selecteddate);
  }

  saveSelectedRecord(){
    this.setState({ showmodal: false });
    this.props.invokesave(this.state.selecteddate, this.state.selectedweight);
  }


  onWeightClick = () => {
      this.setState({ showmodal: true }, () => {

      });

    }

    onDateChange(date) {
        this.setState({
          selecteddate: date
        });
      }

      render() {

        return (

          <View style={styles.containerStyle}>
          <Modal
                animationType="slide"
                transparent={false}
                visible={this.state.showmodal}
                onRequestClose={() => { alert("Modal has been closed.") }}
                >
               <View style={{ marginTop: 22 }}>
                       <DatePickerIOS
                         date={this.state.selecteddate}
                         mode="date"
                         onDateChange={(date) => this.onDateChange(date)}
                         style={{ height: 100, width: 300 }}
                       />
              </View>
              <View style={{ marginTop: 22, borderColor: '#ddd', borderWidth: 5 }}>
                       <TextInput
                         returnKeyType="done"
                         keyboardType='numeric'
                         style={{
                           height: 40,
                           width: 60,
                           borderColor: 'gray',
                           borderWidth: 1,

                         }}
                         onChangeText={(text) => this.setState({ selectedweight: text })}
                         value={this.state.selectedweight.toString()}
                       />
                      <Text>KG</Text>
                      <TouchableHighlight style={styles.buttonstyle} onPress={this.deleteSelectedRecord.bind(this)}>
                      <Text style={styles.buttontextstyle}>Delete</Text>
                      </TouchableHighlight>
                      <TouchableHighlight style={styles.buttonstyle} onPress={this.saveSelectedRecord.bind(this)}>
                      <Text style={styles.buttontextstyle}>Save</Text>
                      </TouchableHighlight>


               </View>

              </Modal>
                    <View style={styles.headerContentStyle}>
                          <Text>{this.props.logstringdate}</Text>
                          <Text>{this.props.bmi}</Text>
                    </View>
                    <View style={styles.thumbnailContainerStyle}>
                          <Text onPress={this.onWeightClick}>{this.props.weight}</Text>
                    </View>
          </View>
        );

      }
      };

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 1,
    //shadowColor: '#000',
    //shadowOffset: { width: 0, height: 2},
    //shadowOpacity: 0.1,
    //shadowRadius: 2,
    //elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop:10,
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row'

  },
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  buttonstyle: {
    marginRight: 40,
    marginLeft: 40,
    marginTop: 10,
    paddingTop: 20,
    paddingBottom: 20,
    backgroundColor: '#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  buttontextstyle: {
    color: '#fff',
    textAlign: 'center',
  }
};