React Native Wheel Color Picker - naeemur - 不确定如何实际访问颜色

Question

我正在尝试获取颜色选择器的结果，以便我可以在单独的组件中不断更新卡片的颜色。颜色选择器用于卡片的颜色！我尝试了一些事情，但大多数都以未定义或错误的形式返回。问题是要放入setCardColour() 我有this.currentColor 但这不起作用。有什么想法吗？

• 这是颜色变化时的功能：

  function changeCardColour() {
    setCardColour(this.currentColour)
    console.log(cardColour)
  }
  

• 这是颜色选择器本身：

  <ColourPicker
    color = {cardColour}
    swatches = {false}
    style = {styles.colourWheel}
    onColorChange = {changeCardColour}
  />
  

• I would like the card to change colour

Answer 1

您需要更改代码，例如，

function changeCardColour(selectedColour) {
  setCardColour(selectedColour)
}

根据文档， onColorChange: (color) => {} 滑块和滚轮拇指移动的回调函数。

const RoundedColorPicker = () => {
  const [currentColor, setCurrentColor] = useState('#000');

  const onColorChange = (selectedColor: string) => {
    setCurrentColor(selectedColor);
  };

  return (
    <SafeAreaView style={RoundedColorPickerStyle.container}>
      <View
        style={[
          RoundedColorPickerStyle.currentColorContainer,
          {backgroundColor: currentColor},
        ]}
      />
      <Text>Current Color:{currentColor}</Text>
      <ColorPicker
        color={currentColor}
        swatchesOnly={false}
        onColorChange={onColorChange}
        thumbSize={40}
        sliderSize={40}
        noSnap={true}
        row={false}
      />
    </SafeAreaView>
  );
};

我就是这样用的，对我来说效果很好。