如何将ProgressBar置于屏幕中央并移除React Native中的警告消息

Question

如何将ProgressBar置于屏幕中央并移除React Native中的警告消息

4

如何将进度条居中显示，就像在相对布局的父元素中居中显示Android中一样，并且如何删除警告消息。如何更改ProgressBar的可见性（不可见或已消失或可见）。 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>

- YLS

尝试使用ActivityIndicator代替progressbar。另外，您所说的屏幕中心是什么意思？作为覆盖层吗？ - Ravi Theja

是的，就像在中心的覆盖层一样，如何改变它的可见性。 - YLS

1

请参考以下链接：https://dev59.com/MF0a5IYBdhLWcg3wLV8G#30870639 - Ravi Theja

没有，我的进度条没有居中显示在屏幕上。 - YLS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- martinarroyo · Accepted Answer

正如 @ravi-teja 所指出的那样，使用绝对定位。此外，您之所以会收到警告，是因为 styleAttr 不是样式属性（名称具有误导性），而是一个 prop。您还可以使用布尔值（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。