React Native Paper ProgressBar 不可见

Question

你好，我一直在学习教程，一切顺利，直到导师在他的项目中使用了 react-native-paper ProgressBar，我写的完全一样，但它不可见，我找到了文档并将其插入，仍然不可见。

我做错了什么？

import {View, StyleSheet, Text} from 'react-native' ;
import { ProgressBar, Colors } from 'react-native-paper';

import CountDown from '../comps/CountDown.js' ;

const Timer = ({task}) => {
  return ( 
    <View style={styles.container}> 
      <CountDown />
      <Text style={styles.text}> Focusing On:</Text>
      <Text style={[styles.text, styles.textBold]}> {task} </Text>
      <ProgressBar progress={0.4} color='#5E84E2' style={styles.progress}/>
    </View>
  ) ;
}

const styles = StyleSheet.create({
  container : {
    flex: 1,
    width: 100,
    alignItems: 'center' ,
    justifyContent: 'center',
    paddingTop: 40,
  },
  text: {
    // flex: 0.5, 
    color: 'white'
  },
  textBold: {
    fontWeight: 'bold' ,
    // borderColor: 'white',
    // borderWidth: 1,
    // borderStyle: 'solid' ,
  },
  progress: {
    height: 10,
    // borderColor: 'white',
    // borderWidth: 1,
    // borderStyle: 'solid' ,
  }
}) ;

export default Timer ;

此外，如果我要为进度条添加边框，它会出现但宽度会继续增加，即使宽度大于视口宽度也是如此。我不知道发生了什么

Answer 1

这里的问题是当你使用 alignItems 时，子组件需要有一个固定的宽度，你的进度条没有固定的宽度。

您必须在样式中提供一个。

 progress: {
    height: 10,
    width:50
  }

基于 documentation 宽度的默认值为

auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.

最好有一个宽度值，这将解决您的问题。

Answer 2

响应式解决方案

目前 ProgressBar 不支持 flex 样式系统。如果有人还希望在其父组件的情况下使宽度等于 100%，则提供了一个很好的推荐解决方案 here。

只需将宽度设置为未定义:

progress: {
    height: 10,
    width:undefined
}

例如

<View style={{ flex: 2, other flex styles }}>
  <ProgressBar progress={0.5} color="white"  style={{ height: 5, width: undefined }} />
</View>

React Native Paper ProgressBar 不可见

React Native Paper ProgressBar Not visible

javascript

reactjs

react-native

react-native-paper

响应式解决方案