React native 使用React Native使可触摸面板的一部分透明
我想制作一个可触摸的traslucid的一部分，也就是说，能够看到它背后的背景 一种可能的破解方法是使用React native 使用React Native使可触摸面板的一部分透明,react-native,stylesheet,React Native,Stylesheet,我想制作一个可触摸的traslucid的一部分，也就是说，能够看到它背后的背景 一种可能的破解方法是使用MaskedView并在可触摸的中再次绘制我的背景，作为子对象的道具到MaskedView。但是，这只适用于有限数量的场景。这就是它的工作原理： 然而，例如，一旦我增加一些裕度，事情就会变得不协调： 几点澄清，以防万一： 我的真正意图是在屏幕的两个角之间使用渐变。在这种情况下，即使在我介绍的简单场景中，事情也不起作用 我知道为什么这项技术不起作用，但我还没有想出更好的办法 这是一个MW
MaskedView可触摸的中再次绘制我的背景，作为子对象的道具到MaskedView
。但是，这只适用于有限数量的场景。这就是它的工作原理：
然而，例如，一旦我增加一些裕度，事情就会变得不协调：
几点澄清，以防万一：
- 我的真正意图是在屏幕的两个角之间使用渐变。在这种情况下，即使在我介绍的简单场景中，事情也不起作用
- 我知道为什么这项技术不起作用，但我还没有想出更好的办法
这是一个MWE，使用视图而不是图像，因此我不需要捆绑png
文件：
从“React”导入React；
进口{
看法
可触摸不透明度，
}从“反应本机”；
从“@react native community/masked view”导入MaskedView；
从“反应本机线性渐变”导入LinearGradient；
导出默认函数（）{
返回(
如果取消对此行的注释，则半透明效果将被破坏
}
}>
);
}
以下是一份世博会点心来说明我的评论：
其思想是，与其渲染然后隐藏内容，不如先不渲染任何内容。这将渲染按钮边界内的白色端点。包装器使用溢出：“隐藏”
，以确保可触摸效果仅出现在有边界的边界半径范围内（使用TouchableHighlight更为明显），并确保白色端点和其中的任何其他内容保持在有边界的边界半径范围内
import*as React from'React'；
从“react native”导入{文本、视图、样式表、TouchableOpacity}
从“expo linear gradient”导入{LinearGradient}
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
坡度：{
弹性：1，
为内容辩护：“中心”
},
包装器：{
身高：100，
边界半径：30，
溢出：“隐藏”，
marginLeft:50，
flexDirection:'行'，
},
触摸：{
flexDirection:'行'，
弹性：1，
},
完:{
宽度：50，
背景颜色：“白色”，
高度：“100%”，
},
内容：{
弹性：1，
}
});
为什么不将TouchableOpacity
下的顶层视图设置为具有背景：透明
，然后在具有纯色背景的儿童视图
中渲染？@zaytrix对不起，我不明白你的意思。您能用您的建议修改MWE并将其作为答案发布吗？谢谢@zaytrix！不幸的是，我不知道如何将您的方法应用到比视图（例如，一些文本或图像）更复杂的事情上。我已经更新了我的问题，以显示一个使用图像的示例。你认为有什么办法可以达到预期的效果吗？啊，我现在明白了。因此，对于你的MaskedView
hack，它不同步的原因是因为你在蒙版下面渲染另一个LinearGradient
，以TouchableOpacity
为边界。我不确定是否有办法将其作为遮罩，我的建议是创建另一个图像，该图像的高度为原始图像的TouchableOpacity
和宽度，填充白色，并带有原始图像的剪切部分。这样你就可以把它放在中间，然后用Flex填充边<代码>视图的宽度<代码>