android - 如何将进度条置于屏幕中央并在 native react 中删除警告消息

Question

如何将进度 strip 到屏幕中央，就像我们在相对布局的父项中的 android center 中所做的那样，以及如何删除警告消息。如何更改进度条中的可见性(不可见或消失或可见)。 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

正如 @ravi-teja 所指出的，使用绝对定位。另外，出现警告是因为 styleAttr 不是样式属性(名称具有误导性)而是 Prop 。您还可以使用 bool 值 (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'}} />}
       //...
}

除此之外，正如其他人所说，您应该尝试 ActivityIndi​​cator，因为它适用于 iOS 和 Android。