React native 如何创建显示分数的组件

乐谱图像 我想在react native中创建一个组件，它将显示分数，分数可以不同，即可以是65或45。请浏览图像链接。

试试这个

const ScoreComponent = (props) => {
  return <View style={{backgroundColor:"white",width:50,height:50,borderRadius:25,borderWidth:1,borderColor:"red",alignItems:"center",justifyContent:"Center"}}>
    <Text style={{color:"blue"}}>{props.score}</Text>
  </View>
}

const ScoreComponent=（道具）=>{
返回
{props.score}
}

像这样使用

<ScoreComponent score={65}  />

---

零食链接

我修改了@Mehran Khan的答案，在背景中加入了橙色的四分之一球体

const ScoreComponent=（道具）=>{
返回
{props.score}
}
const ScoreContainer=（）=>{
返回
;
}
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
对齐项目：“中心”，
溢出：“隐藏”，
},
});

你想要后面那个褪色的橙色四分之一圆吗？是的。我也需要，但是分数应该是自动计算的，而不是硬代码。你通过了分数={65}，它是

prop

。你可以传递任何你想要的东西，比如45或65，实际上我将在一个渲染函数中使用它，这意味着它将是一张卡，每当我为它添加一个新数据时，它都将被渲染，例如：它将显示为人物1和65，人物2和45，人物3和20。。。。。所以我不能直接把分数定为65或45。

const ScoreComponent = (props) => {
  return <View style={{backgroundColor:"white",width:50,height:50,borderRadius:25,borderWidth:1,borderColor:"red",alignItems:"center",justifyContent:"Center"}}>
    <Text style={{color:"blue"}}>{props.score}</Text>
  </View>
}

const ScoreContainer = () => {
  return <View style={{overflow: 'hidden', width: 55, height: 55, justifyContent: 'center', alignItems: 'center'}}><ScoreComponent score={65} />
<View style={{zIndex: -10, width: 90, height: 90, borderRadius: 100, position: 'absolute', left: -45, bottom: -45, backgroundColor: 'rgba(240,100,0,0.3)'}}/>
  </View>;
}
export default function App() {
  return (
    <View style={styles.container}>
      <ScoreContainer  />
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems:"center",
    overflow: 'hidden',
  },
 
});