React Native进度填充屏幕

Question

在我的应用程序中，我试图在TouchableHightlight元素上单击事件时使用ActivityIndicator显示进度条。问题是，我想让我的进度条填满整个屏幕(甚至填满导航栏占据的空间)。或者，如果可能的话，一个进度条，在屏幕显示时会占用屏幕上的所有触摸事件。

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，而不是占据整个屏幕。

那么，我有没有办法给ScrollView元素的孩子们不同的flex能力，让我的ActivityIndicator占据整个屏幕，而我的View占据了它的内容？

Answer 1

如果你想让它填满整个，你需要把它包装在模态中，并设置｛width:"100%"，height:"100%)｝