Question

我有一个本机应用程序，其背景为 LinearGradient 以及由 TouchableOpacity （背景颜色为白色）和文本

构建的按钮

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

我已经尝试将文本颜色设置为透明，但是由于 TouchableOpacity 是白色的，因此文本颜色也会变为白色

我的想法是获取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组件。

如何将按钮文本颜色动态更改设置为LinearGradient滚动视图的背景颜色？

1 个答案: