React Native Paper ProgressBar 不可见答案

【问题标题】：React Native Paper ProgressBar Not visibleReact Native Paper ProgressBar 不可见
【发布时间】：2021-04-28 11:17:38
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-native react-native-paper

【解决方案1】：

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

您必须在样式中提供 with。

 progress: {
    height: 10,
    width:50
  }

基于documentation宽度的默认值为

auto (默认值) React Native 计算宽度/高度元素基于其内容，无论是其他子元素、文本还是一张图片。

最好有一个宽度值来解决你的问题。

【讨论】：

好的，我试试这个
是的，兄弟，它成功了，感谢您为我节省了很多时间 :)。我从来不知道 alignItems 的这个怪癖。再次感谢

【解决方案2】：

响应式解决方案

目前ProgressBar 不支持flex 样式系统。如果有人还想让宽度等于 100%（如果它是父组件），则提供了一个很好的推荐解决方案 here。

只需将宽度设置为undefined：

progress: {
    height: 10,
    width:undefined
}

例如

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

【讨论】：