高程样式道具导致子组件出现问题答案

【问题标题】：Elevation style prop causing issues with child components高程样式道具导致子组件出现问题
【发布时间】：2020-01-12 19:39:37
【问题描述】：

已经为两个按钮完成了所有样式设置，我使用内部标题标题在屏幕之间切换回来。 iOS 实现完美运行，但 Android 的海拔样式道具导致了一些问题。它似乎还将高程样式传递给子组件，在我的例子中是一个 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

【问题讨论】：

标签： react-native expo shadow android-elevation

【解决方案1】：

您是否尝试过：TouchableWithoutFeedback

【讨论】：

是的，它只会导致更大的问题，即阴影出现在内部，就像单击时一样。

【解决方案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'
    },

【讨论】：