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

如@ ravi-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。

如何将ProgressBar置于屏幕中央并删除本机中的警告消息

1 个答案: