时间戳

首页 > 解决方案 > React Native 中的任何东西都可以通过样式来实现吗？

reactjs - React Native 中的任何东西都可以通过样式来实现吗？

问题描述

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

我注意到文档中有一个 outerCircleStyle 道具，这是否意味着我不能使用标准样式？ 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',
  },
});

标签： reactjsreact-native

解决方案

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

我的解决方案：

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/>

推荐阅读