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 時，子組件需要具有固定寬度，而您的進度條確實具有固定寬度。

您必須在 styles 中提供一個。

 progress: {
    height: 10,
    width:50
  }

根據文檔，寬度的默認值為

auto (默認值) React Native 根據其內容計算元素的寬度/高度，無論是其他子元素、文本還是圖像。

最好有一個寬度值，這將解決您的問題。

Answer 2

響應式解決方案

目前ProgressBar不支持flex樣式系統。 如果有人還希望寬度等於 100%（如果它是父組件），那么這里提供了一個很好的推薦解決方案。

只需將寬度設置為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>