如何将ProgressBar放入屏幕中心，并在原生反应中删除警告消息

Question

如何将进度条带到屏幕中心，就像我们在父级中的android中心所做的相对布局以及如何删除警告消息。如何更改进度条中的可见性（不可见或消失或可见）。 MyScreen

var ProgressBar = require('ProgressBarAndroid'); 
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}> 
     <Text style={{ 
      backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center', 
      color: 'white', marginBottom: 30 
     }}>LOGIN</Text> 
     <ProgressBar style={{justifyContent:'center',alignItems:'center',styleAttr:'LargeInverse', color:'white'}} /> 
     <View style={{ justifyContent: 'center' }}> 
      <TextInput 
       style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }} 
       placeholder='Username' placeholderTextColor='white' 
       autoFocus={true} 
       returnKeyType='next' 
       keyboardType='email-address' 
       onChangeText={(valUsername) => _values.username = valUsername} 
       /> 
      <TextInput 
       secureTextEntry={true} 
       style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }} 
       placeholder='Password' placeholderTextColor='white' 
       onChangeText={(valPassword) => _values.password = valPassword} 
       /> 
     </View> 
     <Button onPress={() => { _handlePress() } } label='Login' /> 
     <View> 
      <Text style={{ color: 'white', justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}> 
       Forgot Password 
      </Text> 
      <Text style={{ color: 'white', marginTop: 10, justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}> 
       SignUp 
      </Text> 
     </View> 
    </View> 

Answer 1

如@拉维-Teja公司指出，使用绝对定位。此外，由于styleAttr不是风格属性（该名称具有误导性），而是道具，因此出现警告。您还可以使用布尔值（myCondition）（也可以存储在您的状态）以编程方式显示和隐藏它。你应该做这样的事情：

var ProgressBar = require('ProgressBarAndroid'); 

// ... 
render(){ 
    const {width, heigth} = Dimensions.get('window'); // The dimensions may change due to the device being rotated, so you need to get them in each render. 
    return (

     //... 
     {this.state.myCondition && <ProgressBar styleAttr={'LargeInverse'} style={{position: 'absolute', left: width/2, height: height/2, justifyContent:'center',alignItems:'center', color:'white'}} />} 
     //... 
} 

除此之外和其他人说，你应该给一个尝试ActivityIndicator，因为它同时适用于iOS和Android。