根据%更改React Native中<View>组件的部分背景色

import React from 'react';
import { View } from 'react-native';

const MyComponent = () => {
  const percentage = 50; // 设置百分比值

  // 根据百分比计算得出具体的颜色值
  const color = `hsl(120, ${percentage}%, 50%)`;

  return (
    <View style={{ backgroundColor: color }}>
      {/* 组件内容 */}
    </View>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';

const MyComponent = () => {
  const [percentage, setPercentage] = useState(50); // 设置初始百分比值

  // 根据百分比计算得出具体的颜色值
  const color = `hsl(120, ${percentage}%, 50%)`;

  return (
    <View style={[styles.container, { backgroundColor: color }]}>
      {/* 组件内容 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // 其他样式属性
  },
});

export default MyComponent;