В моем приложении я пытаюсь отобразить индикатор выполнения, используя ActivityIndicator после нажатия на элемент TouchableHightlight.Проблема в том, что я хотел бы, чтобы мой индикатор заполнения заполнял весь экран (даже заполняя пробелы, занимаемые панелью навигации).Или, если это возможно, индикатор выполнения, который принимает все сенсорные события на экране во время его отображения.
render()
{
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
}
})
Я пытался присвоить contentContainerStyle={{flex:1}} своему ScrollView, но я нене хочу, чтобы мой элемент ListOption занимал все оставшееся место на экране и выглядел толстым.Прямо сейчас мой ActivityIndicator занимает весь ScrollView, который не занимает весь экран.
Итак, будет ли у меня какой-либо способ дать другим flex способностям детейэлемента ScrollView, чтобы мой ActivityIndicator занимал весь экран, а мой View занимал столько же, сколько его содержимое?