Question

我想知道是因为我添加了一个名为“ progressCircle”的组件并试图将其居中，但是我应用的样式似乎都没有影响到它。

我注意到文档中有一个externalCircleStyle道具，这是否意味着我不能使用标准样式？ https://github.com/MrToph/react-native-progress-circle

代码（ProgressCircle是我要居中的代码）：

 <View>
    <StatusBarPlaceHolder style = {styles.bar}/>
       <ProgressCircle style = {{flexDirection: 'row', alignItems: 'center'}}
          percent={30}
          radius={100}
          borderWidth={12}
          color="#3399FF"
          shadowColor="#999"
          bgColor="#fff"
      >
          <Text style={{ fontSize: 18, fontWeight: 'bold'}}>{'30%'}</Text>
      </ProgressCircle>

      <Card style = {styles.card}>
        <Card.Content>
          <Title style = {styles.cardTitle}>{test.macro}</Title>
          <Text style= {styles.cardElements}>{test.title}</Text>
          <Progress.Bar progress={0.7} width={200} height={10} />
        </Card.Content>
        <Card.Actions>
        </Card.Actions>
      </Card>

      <Card style = {styles.card}>
        <Card.Content>
          <Title style = {styles.cardTitle}>{30}</Title>
          <Text style= {styles.cardElements}>Carbs</Text>
          <Progress.Bar progress={0.3} width={200} height={10} />
        </Card.Content>
        <Card.Actions>
        </Card.Actions>
      </Card>
    </View>

样式表：

const styles = StyleSheet.create({
  bar: {
    justifyContent: 'flex-start',
  },
  card: {
    justifyContent: 'center', 
    borderRadius: 30,
    margin: 5
  },
  cardTitle: {
    paddingTop: 20,
    fontSize: 40,
    fontWeight: 'bold',
  },
  cardElements:{
    fontSize: 20,
    paddingTop: 10,
    fontWeight: 'bold',
    flexDirection: 'row',
  },
});

Answer 1

我假设视图中存在某种冲突，所以我创建了一个单独的函数来包含进度条视图。在此函数中对其进行样式设置使我可以对其应用样式。由于某些原因，无法对我原始代码中卡上方呈现的所有内容进行样式设置。

我的解决方案：

function MainProgress(){
  return(
    <View style = {styles.progressBar}>
      <ProgressCircle style = {styles.progressBar}
        percent={30}
        radius={100}
        borderWidth={12}
        color="#3399FF"
        shadowColor="#999"
        bgColor="#fff"
      >
      <Text>{'30%'}</Text>
      </ProgressCircle>
    </View>
  )
}

class HomeScreen extends React.Component { 
  render() {  
    return (  
      <View>
        <StatusBarPlaceHolder/>
          <MainProgress/>

React Native中的任何样式都可以设置样式吗？

1 个答案: