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

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',
    },


});

使用此代码，我的屏幕如下所示

​

​

我的问题是，当我单击蓝色向下箭头图像时，drodown不会打开，只有当我单击文本时才会打开。

如何解决这个问题？

还有一个问题是dropdown宽度没有正确地与父级对齐。

它是这样来的

​

​

谁能告诉我如何显示下拉列表时，图标被点击，以及如何对齐下拉列表的宽度正确。

Answer 1

试试这个，在箭头图像上，请使用。它对我有效，希望对你也有效。