我使用 React Native 的 TouchOpacity 组件创建了一个自定义下拉菜单,如下所示。
<View style={dropDownStyle}>
<TouchableOpacity onPress={() => _switchTimeSpan('Day')}>
<Text style={dropDownItemStyle}>Day</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => _switchTimeSpan('Week')}>
<Text style={dropDownItemStyle}>Week</Text>
</TouchableOpacity>
</View>
样式如下
dropDownStyle: {
position: 'absolute',
marginTop: 20,
width: 80,
},
dropDownItemStyle: {
marginTop: 5,
flex: 1,
textAlign: 'right',
},
按下 TouchOpacity 组件时不会触发 onpress 函数。此问题仅存在于android中,不存在于IOS中。
编辑 1:有一个使用 react-native-svg-charts 创建的区域图表,它被提到的下拉列表重叠。但是,在检查 onPress 不起作用的原因是否可能是由于 zIndex 问题时,我注意到提到的下拉列表是最上面的组件。
图表的代码如下。
我正在使用 react-native-svg-charts
<View style={containerStyle}>
<YAxis
data={data}
style={yAxisStyle}
formatLabel={value => yAxisFormat(value)}
contentInset={verticalContentInset}
numberOfTicks={5}
svg={axesSvg}
/>
<View style={chartWrapperStyle}>
<AreaChart
style={chartStyle}
data={data}
contentInset={verticalContentInset}
curve={shape.curveCatmullRom}
svg={{ fill: '#FF4D4D' }}
animate
/>
<View style={xAxisStyle}>
{
timeSpan !== 'Month' && (
<XAxis
data={data}
// formatLabel={(value, index) => months[value]}
formatLabel={(value, index) => xAxisPoints[index]}
contentInset={{ left: 10, right: 10 }}
// numberOfTicks={5}
svg={axesSvg}
/>
)
}
</View>
</View>
</View>
图表的样式如下。
containerStyle: {
height: 200,
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'row',
},
yAxisStyle: {
// marginBottom: 20,
position: 'absolute',
height: 180,
left: 20,
zIndex: 2,
},
chartStyle: {
flex: 1,
},
chartWrapperStyle: {
flex: 1,
},
xAxisStyle: {
marginHorizontal: -5,
height: 20,
},
最佳答案
当我将其作为屏幕上的孤立且唯一的组件进行测试时,一切似乎都在 Android(三星 Galaxy Tab 2)上正常运行。尝试隔离此组件,看看它是否适用于您的 Android,也许其他组件会影响它。您也可以尝试检查容器组件(使用 dropDownStyle)是否有一些高度或尝试设置 100%。
关于android - TouchableOpacity 组件设置为 position absolute not clickable in android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56489850/