React Native实现升级等级进度条-代码示例

2024-01-08 13:48:38

?代码

  const Experience = () => {
    let level = Math.ceil(user?.level / 10)
    return level * 500
  }
<View style={styles.progressBar}>
	<Text style={styles.progressBarText}>
	  还需{Experience() - user?.experience}点经验升级至LV{user?.level + 1}
	</Text>
	<View style={styles.progressBarWarp}>
	  <View
		style={[
		  styles.progressBarBox,
		  { width: fitSize(327 * (user?.experience / Experience())) },
		]}
	  ></View>
	</View>
	<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
	  <Text preset={"numner"}>LV{user?.level}</Text>
	  <Text preset={"numner"}>LV{user?.level + 1}</Text>
	</View>
</View>


//==================
const styles = StyleSheet.create({
	progressBar: {
		alignSelf: "center",
		width: fitSize(327),
		height: fitSize(60),
		marginBottom: fitSize(16),
	  },
	  progressBarText: {
		fontSize: fitSize(12),
		color: "#999",
		marginVertical: fitSize(6),
	  },
	  progressBarWarp: {
		width: fitSize(327),
		height: fitSize(6),
		backgroundColor: "#E6E6E6",
		borderRadius: fitSize(3),
		overflow: "hidden",
	  },
	  progressBarBox: {
		// width: fitSize(20),
		height: fitSize(6),
		backgroundColor: "#FAC033",
		borderRadius: fitSize(3),
	  },
})

文章来源:https://blog.csdn.net/JackieDYH/article/details/122176179
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。