1回答

CrazyCodeBoy

2018-09-06

问题分析：出现上述问题有可能由两种情况导致：

1. 样式设置不对；

2. MoreMenu的render方法实现不对；

可参考：

renderMoreView() {
    const {theme, menus} = this.props;
    return (
        <MenuDialog
            ref={dialog => this.dialog = dialog}
            menus={menus}
            theme={theme}
            onSelect={(tab) => this.onMoreMenuSelect(tab)}
        />
    );
}

MenuDialog:
render() {
        const {onClose, menus, onSelect, theme} = this.props;
        return (<Modal
            transparent={true}
            visible={this.state.visible}
            onRequestClose={() => onClose()}
        >
            <TouchableOpacity
                style={styles.container}
                onPress={() => this.dismiss()}
            >
                <Image
                    source={require('../../res/images/arrow_top.png')}
                    style={styles.arrow}
                />
                <View
                    style={styles.content}
                >
                    {menus.map((result, i, arr) => {
                        let menu = arr[i];
                        return <TouchableOpacity
                            key={i}
                            onPress={() => {
                                onSelect(arr[i])
                            }}
                            underlayColor={'transparent'}
                        >
                            <View style={{alignItems: 'center', flexDirection: 'row'}}>
                                <Image source={menu.icon}
                                       resizeMode={'stretch'}
                                       style={[styles.icon, theme.styles.tabBarSelectedIcon]}
                                />
                                <Text
                                    style={styles.text}
                                >{menu.name}</Text>
                                {
                                    i !== menus.length - 1 ? <View
                                        style={styles.line}
                                    /> : null
                                }
                            </View>
                        </TouchableOpacity>
                    })}
                </View>
            </TouchableOpacity>
        </Modal>)
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        alignItems: 'flex-end'
    },
    arrow: {
        marginTop: 56 + (DeviceInfo.isIPhoneX_deprecated ? 24 : 0),
        width: 16,
        height: 6,
        marginRight: 18,
        resizeMode: 'contain'
    },
    content: {
        backgroundColor: 'white',
        borderRadius: 3,
        paddingTop: 3,
        paddingBottom: 3,
        marginRight: 3
    },
    text: {
        fontSize: 16,
        color: 'black',
        fontWeight: '400',
        paddingRight: 15
    },
    line: {
        height: 0.3,
        backgroundColor: 'darkgray'
    },
    icon: {
        width: 16,
        height: 16,
        margin: 10,
        marginLeft: 15
    }
});

0

0