Question

我想在我的应用中实现react-native-modal-dropdown功能

这是代码

      <View style={styles.viewStyle}>
                    <Text style={styles.textStyle}>{Strings.Location}</Text>
                    <View style={styles.input}>

                        <Image
                            style={styles.mapIcon}
                            source={require('../assets/map_pic_icon.png')}
                        />

                        <ModalDropdown

                            onSelect={(index, value) => { this.setState({ selected: value }) }}
                            options={['option 1', 'option 2', 'option 3', 'option 4']}
                            defaultValue={Strings.Gaston}
                            dropdownTextStyle={{ backgroundColor: '#fff', fontSize: 18, color: colors.black }}/*Style here*/
                            textStyle={{ fontSize: 18, color: colors.gunmetal, alignSelf: 'flex-start', marginLeft: 10 }}
                            dropdownStyle={{ flex: 1, width: '90%', marginVertical: 10, borderWidth: 1, borderColor: colors.light_gray }}
                            style={{ flex: 1, width: '100%', backgroundColor: colors.white, justifyContent: 'center' }}
                        />
                        <Image
                            style={styles.iconStyle}
                            source={require('../assets/down_arrow_blue.png')}
                        />
                    </View>
                </View>


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.white,
    },

    viewStyle: {
        margin: 10,
    },

    input: {
        height: 50,
        width: '100%',
        marginTop: 8,
        borderRadius: 2,
        borderColor: colors.light_gray,
        fontSize: 20,
        borderWidth: 1,
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    iconStyle: {
        margin: 20,
        alignSelf: 'flex-end'
    },
    mapIcon: {
        margin: 10,
        alignSelf: 'center',
    },


});

使用此代码，我的屏幕看起来像这样

我的问题是，当我单击蓝色的向下箭头图像时，下拉菜单未打开，仅当我单击文本时才打开。

如何解决这个问题

还有一个问题是，下拉宽度与父级之间的对齐方式不正确。

像这样

有人可以告诉我单击图标时如何显示下拉列表，以及如何正确对齐下拉列表的宽度。

Answer 1

请改用此方法，请在箭头图像上使用。它对我有用，希望对您也有用。

在react-native-modal-dropdown中单击图像时如何显示下拉列表

1 个答案: