Javascript 反应纸进度条不可见

您好，我一直在关注一个教程，它进展顺利，直到导师在他的项目中使用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 ;

从'react native'导入{View，StyleSheet，Text}；
从“react National paper”导入{ProgressBar，Color}；
从“../comps/CountDown.js”导入倒计时；
常量计时器=（{task}）=>{
报税表（
重点是：
{task}
) ;
}
const styles=StyleSheet.create({
容器：{
弹性：1，
宽度：100，
对齐项目：“居中”，
为内容辩护：“中心”，
paddingTop:40，
},
正文：{
//弹性系数：0.5，
颜色：“白色”
},
文本粗体：{
fontWeight:'粗体'，
//边框颜色：“白色”，
//边框宽度：1，
//边框样式：“实心”，
},
进展：{
身高：10，
//边框颜色：“白色”，
//边框宽度：1，
//边框样式：“实心”，
}
}) ;
导出默认定时器；

---

另外，如果我给progressBar加上边框，它会出现，但宽度会继续增加，即使宽度大于视口宽度。我不知道发生了什么

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

您必须在样式中提供一个

 progress: {
    height: 10,
    width:50
  }

基于宽度的默认值为

auto（默认值）React Native计算对象的宽度/高度 基于其内容的元素，无论是其他子元素、文本还是 图像

---

最好为宽度设置一个值，以解决您的问题。

好的，我会试试this@mananaggarwal你试过了吗？是的，兄弟，它成功了，谢谢你为我节省了很多时间：）。我从来都不知道这些奇怪的东西。再次感谢！太好了，不客气：）