javascript - 如何将按钮文本颜色动态更改为 LinearGradient ScrollView 的背景颜色？

Question

我有一个具有 LinearGradient 背景的 react-native 应用 和一个由 TouchableOpacity(背景颜色为白色)和 Text

构建的按钮

我正在尝试将 Text 颜色设置为类似于 LinearGradient 背景颜色，因此在滚动时，Text 颜色会根据动态变化在 LinearGradient 背景色上。

我已经尝试将Text Color 设置为透明，但是由于TouchableOpacity 是白色，所以Text Color 也变成了白色

我有一个想法，即获取 ScrollView Y，并创建一个在滚动时输出不同 LinearGradient Color 的函数，但这可能需要一些工作。除了这个还有更简单的方法吗？

import React from 'react';
import { View, TouchableOpacity, Text, Button } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';


export default class BlackFade extends React.Component {
  render() {
    return (
      <LinearGradient
        colors={['red', 'orange']}
        style={{
          flex: 1,
          justifyContent: 'center',
        }}>
        <View style={{ alignItems: 'center' }}>
          <TouchableOpacity
            style={{
              backgroundColor: 'white',
              alignItems: 'center',
              padding: 25,
              width: '50%',
            }}>
            <Text style={{ fontSize: 36, /*color: "transparent"*/ }}>Button</Text>
          </TouchableOpacity>
        </View>
      </LinearGradient>
    );
  }
}

https://snack.expo.io/@rex_rau/intrigued-scone

Answer 1

我在您的示例代码中没有看到 ScrollView 组件。 BlackFade 组件是否在 ScrollView 中？

如果我理解正确的话，你想要一个带有标题颜色的白色 TouchableOpacity 按钮，就好像你可以透过按钮看到线性渐变背景一样？在那种情况下，正如您已经建议的那样，我看到的唯一方法是将方法耦合到 ScrollView 的 onScroll 方法，并将更新的文本颜色传递给 BlackFade 组件。