我试图弄清楚如何更改React Native的TouchableOpacity组件的不透明度的体积,这意味着我不喜欢在执行按压时的默认不透明度值,我希望不透明度降低.

根据documentation,为此应使用Animated API:

不透明度通过将子对象包装在动画中来控制.视图,该视图已添加到视图层次 struct 中.请注意,这可能会影响布局.

所以,我做到了,看起来就是这样:

<Animated.View style={{ opacity: this.state.opacity._value }}>
    <TouchableOpacity 
        onPress={this.hideKeyboard.bind(this)}
        style={{ opacity: this.state.opacity._value }}
    >
        <Text style={buttonTextStyle}>Cancel</Text>
    </TouchableOpacity>
</Animated.View>

onPress调用的hideKeyboard方法从内部调用changeOpacity方法,看起来是这样的:

changeOpacity() {
    Animated.timing(
        this.state.opacity, 
        {
            toValue: this.state.opacity === 1 ? 0 : 1,
            duration: 500
        }
    ).start();
}

this.state.opacity在构造函数中声明:

constructor(props) {
    super(props);
    this.state = { opacity: new Animated.Value(1) };
}

有了所有这些,行为(TouchableOpacity的不透明度onPress的体积)不会改变,它仍然是默认值.该文档还模糊地介绍了setOpacityTo方法,但由于文档中提供的详细描述,我不知道如何使用它.如何手动配置不透明度?

推荐答案

你试过这个吗

<TouchableOpacity 
  activeOpacity={.7} // default is .2
  ... other props here
/>

React-native相关问答推荐

react-native useEffect / useFocusEffect / useCallback 没有正确更新

React Native:任务 ':app:checkDebugDuplicateClasses' 执行失败

将值从一个 js 文件传递​​到 react native 中的另一个 js 文件:react native

何时在 React Native 中使用辅助功能 Role='link'?

如何在 navigation.js 文件中的 react-navigation 中当前路由名称?

React Native 转换与枢轴点

react-native 链接仅适用于一个项目(Android 或 iOS)

未找到 xcode 'boost/config/user.hpp' 文件

FlatList contentContainerStyle -> justifyContent: 'center' 导致滚动问题

由于端口 8081 sunproxyadmin,无法打包 react native

React Native 中使用了哪些维度单位?

react-native 元素/目录 struct 设置

React Native 元素,未生成 index.ios.js 或 index.android.js

ReactNative TextInput 不可见 iOS

在react-native中调试应用程序崩溃

当前未启用语法nullishCoalescingOperator

为什么我收到警告:函数作为 React 子级无效?

python 3与本机兼容吗?还是我应该按照 react 文档的建议安装 python 2?

如何从react-native应用程序打开外部应用程序?

无法解析模块react-native-screen