React native 反应本机进度填充屏幕
在我的应用程序中，我试图在点击React native 反应本机进度填充屏幕,react-native,flexbox,React Native,Flexbox,在我的应用程序中，我试图在点击TouchableHightlight元素时使用ActivityIndicator显示进度条。问题是我想让我的进度条填满整个屏幕（甚至填满导航条占用的空间）。或者，如果可能的话，一个进度条，当屏幕显示时，它会占用屏幕上的所有触摸事件 render() { let progress; if (this.state.isLoading) { progress = <ActivityIndicator style={[progress
TouchableHightlightActivityIndicatorrender()
{
let progress;
if (this.state.isLoading) {
progress = <ActivityIndicator style={[progressStyle.container, progressStyle.horizontal]}/>
}
return (
<ScrollView>
<View style={{
zIndex: 1,
flex: 1,
alignItems: 'center',
justifyContent: "flex-start",
}}>
<View style={{
flex: 1,
alignItems: 'flex-end',
paddingTop: 5,
paddingHorizontal: 10,
marginBottom: 10
}}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginTop: 8,
marginBottom: 8
}}>
<Text style={labelStyle}>Name: </Text>
<TextInput
style={ textInputStyle }
value={ this.state.name }
onChangeText={(text) => {
this.setState({
name: text
});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>Start Date: </Text>
<DatePicker
style={ datePickerStyle }
date={this.state.startDate}
mode="date"
placeholder="select start date"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {
this.setState({startDate: date});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>End Date: </Text>
<DatePicker
style={ datePickerStyle }
date={this.state.endDate}
mode="date"
placeholder="select end date"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {
this.setState({endDate: date});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>Max members: </Text>
<TextInput
style={ textInputStyle }
keyboardType="numeric"
value={ this.state.maxMembers }
onChangeText={(text) => {
this.setState({
maxMembers: text
});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>Available Until: </Text>
<DatePicker
style={ datePickerStyle }
date={this.state.availabilityDeadLine}
mode="date"
placeholder="select date til when this space is available"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
placeholderText:{
textAlign: 'center'
}
}}
onDateChange={(date) => {
this.setState({availabilityDeadLine: date});
}} />
</View>
</View>
<ListOption
text="Create Room"
style={{
backgroundColor: (this.state.name!='' && this.state.startDate!=''
&& this.state.endDate!='' && this.state.maxMembers!=''
&& this.state.availabilityDeadLine!='')? Colors.tintColor : '#232323',
textColor: Colors.tintTextColor,
}}
onClick={
() => {
this.state.isLoading=true; this.setState({});
var tDate = new Date();
tDate.setHours(0,0,0,0);
if(this.state.name != '' && this.state.startDate != '' &&
this.state.endDate != '' && this.state.maxMembers != '' &&
this.state.availabilityDeadLine != ''){
if(new Date(this.state.startDate) > new Date(this.state.endDate)){
Alert.alert("start date cannot be after end date");
} else if(new Date(this.state.endDate) < tDate) {
Alert.alert("end date cannot be before today");
} else if(new Date(this.state.availabilityDeadLine) < tDate) {
Alert.alert("space has to be available at least up until today");
} else {
// this.state.isLoading = false;
// this.props.navigation.goBack();
}
}
}
} />
</View>
{progress}
</ScrollView>
);
}
const progressStyle = StyleSheet.create({
container: {
zIndex: 4,
justifyContent: 'center',
backgroundColor: '#565656',
position: 'absolute',
top:0, left: 0, right: 0, bottom: 0
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
}
})
render（）
{
让进步；
if（此.state.isLoading）{
进度=
}
返回(
姓名：
{
这是我的国家({
名称：text
});
}} />
开始日期：
{
this.setState（{startDate:date}）；
}} />
结束日期：
{
this.setState（{endDate:date}）；
}} />
最多成员：
{
这是我的国家({
maxMembers:文本
});
}} />
有效期至：
{
this.setState（{AvailabilityDudate:date}）；
}} />
{
this.state.isLoading=true；this.setState（{}）；
var tDate=新日期（）；
tDate.设定小时数（0,0,0,0）；
如果（this.state.name！=''&&this.state.startDate！=''&&
this.state.endDate！=''&&this.state.maxMembers！=''&&
this.state.availability截止日期！=''）{
if（新日期（this.state.startDate）>新日期（this.state.endDate））{
警报。警报（“开始日期不能晚于结束日期”）；
}else if（新日期（this.state.endDate）contentContainerStyle={{flex:1}}ScrollViewListOption活动指示器滚动视图所以，我有没有办法给
滚动视图flex活动指示器视图