React native React Native:设置DatePickerIOS组件的样式
我有一个组件React native React Native:设置DatePickerIOS组件的样式,react-native,expo,React Native,Expo,我有一个组件Logitem.js，它有一个DatePickerIOS组件 该组件按预期工作，但由于某些原因，datepicker组件的布局混乱，如下所示 理想情况下，datepicker组件应该位于顶部，然后是两个按钮（datepicker组件和按钮之间有足够的空间） Logitem.js代码 import React, { Component } from 'react'; import { Text, View, Modal, DatePickerIOS, TextInput, Touch
Logitem.jsDatePickerIOSimport 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',
}
};
import React，{Component}来自'React'；
从“react native”导入{Text，View，Modal，DatePickerIOS，TextInput，TouchableHighlight}；
导出默认类Logitem扩展组件{
状态={
//selecteddate:'1'，
selectedweight:this.props.weight，
showmodal：错，
selecteddate:新日期（86400000*this.props.logdate），
}
componentDidMount（）{
console.log（'State=>'+this.State.selecteddate+'Logstring date=>'+this.props.logstringdate）；
}
deleteSelectedRecord（）{
this.setState（{showmodel:false}）；
this.props.invokedelete（this.state.selecteddate）；
}
saveSelectedRecord（）{
this.setState（{showmodel:false}）；
this.props.invokesave（this.state.selecteddate，this.state.selectedweight）；
}
onWeightClick=（）=>{
this.setState（{showmodel:true}，（）=>{
});
}
onDateChange（日期）{
这是我的国家({
选定日期：日期
});
}
render（）{
返回(
{警报（“模式已关闭。”）}
>
此.onDateChange（日期）}
样式={{高度：100，宽度：300}
/>
this.setState（{selectedweight:text}）
值={this.state.selectedweight.toString（）}
/>
公斤
删除
拯救
{this.props.logstringdate}
{this.props.bmi}
{this.props.weight}
);
}
};
常量样式={
集装箱运输方式：{
边框宽度：1，
边界半径：2，
边框颜色：'#ddd'，
边界宽度：1，
//阴影颜色：“#000”，
//阴影偏移：{宽度：0，高度：2}，
//阴影不透明度：0.1，
//阴影半径：2，
//立面图：1，
边缘左：5，
marginRight:5，
玛金托普：10，
},
thumbnailContainerStyle：{
为内容辩护：“中心”，
对齐项目：“居中”，
边缘左：10，
marginRight:10，
flexDirection:“行”
},
headerContentStyle：{
flexDirection:'列'，
为内容辩护：“周围的空间”
},
按钮样式：{
marginRight:40，
marginLeft:40，
玛金托普：10，
paddingTop:20，
填充底部：20，
背景颜色：“#68a0cf”，
边界半径：10，
边框宽度：1，
边框颜色：'#fff'
},
ButtonExtStyle：{
颜色：“#fff”，
textAlign:'中心'，
}
};