Elevation 样式道具导致 child 个组件出现问题

Question

为我在 header 标题中使用的两个按钮完成所有样式，以便在屏幕之间切换回来。 iOS 实现工作完美，但 Android 的海拔样式道具引起了一些问题。它似乎还将高程样式传递给 child 组件，在我的例子中，它是一个 TouchableOpacity，这使得按钮点击看起来有点不对劲。有什么办法可以解决这个问题吗？查看图片以更好地了解点击影响...

我试图将 TouchableOpacity 的样式设置为 elevation:0 以覆盖问题，但没有成功。为了使海拔样式道具起作用，我必须设置 borderColor: 'transparent'.

static navigationOptions = (navData) => {
        return {
            headerTitle: (
                <View style={styles.titleContainer}>
                    <TouchableOpacity style={styles.mapTitleButton} onPress={() => { navData.navigation.navigate('Map')}}>
                          <Text style={[styles.titleFont, style={color: Colors.buttonSelected}]}>MAP</Text>  
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.listTitleButton}>
                        <Text style={styles.titleFont}>LIST</Text>
                    </TouchableOpacity>
                </View>
            ), 
            headerLeft: (
                <View style={styles.headerButtonLeft}>
                    <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                        <Item title="menu" iconName="ios-menu" onPress={() => {
                            navData.navigation.toggleDrawer()
                        }} />
                    </HeaderButtons>
                </View>
            ),
            headerRight: (
                <View style={styles.placeholder}></View>
            ),
        }
    }
}

const styles = StyleSheet.create({
    titleContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        height: '60%',
        width: '50%',
        justifyContent: 'center',
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.7,
        shadowRadius: 1,
        shadowColor: '#000000',
        elevation: 5,
        borderColor: 'transparent'
    },
    mapTitleButton: {
        backgroundColor: Colors.buttonUnSelected,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    listTitleButton: {
        backgroundColor: Colors.buttonSelected,
        flex:1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    titleFont: {
        fontFamily: 'sailec',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: 10,
        fontSize: 13
    },
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1
    }
});

Android Screen Capture

Answer 1

您是否尝试过：TouchableWithoutFeedback

Answer 2

我没有将 elevation 放在父容器中，而是通过将它放在实际 TouchableOpacity 的样式中来修复它。还需要注意的是，对于 Android，我需要设置 borderColor: 'transparent' 以获取要渲染的高度。

所以样式如下所示：

titleContainer: {
        alignItems: 'center',
        flexDirection: 'row',
        height: '60%',
        width: '50%',
        justifyContent: 'center',
        shadowOffset: { width: 0, height: 0 },
        shadowOpacity: 0.7,
        shadowRadius: 1,
        shadowColor: '#000000',
    },
    mapTitleButton: {
        backgroundColor: Colors.buttonUnSelected,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 5,
        borderColor: 'transparent'
    },
    listTitleButton: {
        backgroundColor: Colors.buttonSelected,
        flex:1,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 5,
        borderColor: 'transparent'
    },

Elevation 样式道具导致 child 个组件出现问题

Elevation style prop causing issues with child components

shadow

android-elevation

react-native

expo