触摸 DropDownPicker(react-native-dropdown-picker) 时如何更改 DropDownPicker 的不透明度值？

Question

我正在使用“react-native-dropdown-picker”库中的 DropDownPicker。当我在触摸时单击 DropDownPicker 时，它会变为 opacity 。如何设置触摸时应用的自己的不透明度值？ 我正在使用反应本机博览会。 iPhone SE2020 设备。 这是组件代码：

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import DropDownPicker from 'react-native-dropdown-picker';

const myTheme = require("../constants/MyCategoryPickerTheme/myTheme");
DropDownPicker.addTheme("MyThemeName", myTheme);

export function CategoryPicker() {        
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(null);
    const [items, setItems] = useState([
        {label: 'Spain', value: 'spain'},    
        {label: 'Italy', value: 'italy'},
        {label: 'Finland', value: 'finland'},
    ]);

    return (
        <View style={styles.container}>
            <DropDownPicker
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                maxHeight={300}

                theme="MyThemeName"
                multiple={false}
                mode="SIMPLE"
                translation={{
                    PLACEHOLDER: "Select an country"
                }}
                placeholderStyle={{
                    color: "lightgrey",
                    fontSize: 16
                }}
                dropDownDirection="AUTO"
                closeOnBackPressed={true}
            />
        </View>
    );
};
const styles = StyleSheet.create({
    container: {
        borderWidth:0,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',    
        marginBottom:64,
        zIndex:1
    },
});

//myTheme.js:

import {
    StyleSheet
} from 'react-native';

export const ICONS = {
     ARROW_DOWN: require('./icons/arrow-down.png'),
     ARROW_UP: require('./icons/arrow-up.png'),
     TICK: require('./icons/tick.png'),
     CLOSE: require('./icons/close.png')
};

export default StyleSheet.create({
    container: {
        width: '100%',
    },
    style: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        minHeight: 50,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: 'lightgray',
        paddingHorizontal: 10,
        paddingVertical: 3,
        backgroundColor: 'white'
    },    
    
    label: {
        flex: 1,
        color: 'black'
    },
    labelContainer: {
        flex: 1,
        flexDirection: 'row',
    },
    arrowIcon: {
        width: 20,
        height: 20
    },
    tickIcon: {
        width: 20,
        height: 20
    },
    closeIcon: {
        width: 30,
        height: 30
    },
    badgeStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 10,
        backgroundColor: 'black',
        paddingHorizontal: 10,
        paddingVertical: 5
    },
    badgeDotStyle: {
        width: 10,
        height: 10,
        borderRadius: 10 / 2,
        marginRight: 8,
        backgroundColor: 'lightgray'
    },
    badgeSeparator: {
        width: 5,
    },
    listBody: {
        height: '100%',
    },
    listBodyContainer: {
        flexGrow: 1,
        alignItems: 'center',
    },
    dropDownContainer: {
        position: 'absolute',
        backgroundColor: 'white',
        borderRadius: 8,
        borderColor:'lightgray',
        borderWidth: 1,
        width: '100%',
        overflow: 'hidden',
        zIndex: 1000,                    
    },
    modalContentContainer: {
        flexGrow: 1,
    },
    listItemContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 10,
        height: 40
    },
    listItemLabel: {
        flex: 1,
        color: 'black'
    },
    iconContainer: {
        marginRight: 10
    },
    arrowIconContainer: {
        marginLeft: 10
    },
    tickIconContainer: {
        marginLeft: 10
    },
    closeIconContainer: {
        marginLeft: 10
    },
    listParentLabel: {

    },
    listChildLabel: {

    },
    listParentContainer: {

    },
    listChildContainer: {
        paddingLeft: 40,
    },
    searchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderBottomColor: 'black',
        borderBottomWidth: 1
    },
    searchTextInput: {
        flexGrow: 1,
        flexShrink: 1,
        margin: 0,
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 8,
        borderColor: 'black',
        borderWidth: 1,
        color: 'black'
    },
    itemSeparator: {
        height: 1,
        backgroundColor: 'black',
    },
    flatListContentContainer: {
        flexGrow: 1
    },
    customItemContainer: {

    },
    customItemLabel: {
        fontStyle: 'italic'
    },
    listMessageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
    },
    listMessageText: {

    },
    selectedItemContainer: {

    },
    selectedItemLabel: {
        fontWeight: "bold"
    },
    modalTitle: {
        fontSize: 18,
        color: 'black'
    },
    extendableBadgeContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1
    },
    extendableBadgeItemContainer: {
        marginVertical: 3,
        marginEnd: 7
    }
});

我尝试添加 (activeOpacity, pressOpacity) 样式，但它不起作用

<DropDownPicker
                loading={loading}
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                maxHeight={300}

                theme="MyThemeName"
                mode="SIMPLE"
                
                translation={{
                    PLACEHOLDER: "Select an country"
                }}
                placeholderStyle={{
                    color: "lightgrey",
                    fontSize: 16
                }}

                dropDownDirection="AUTO"
                dropDownContainerStyle={{
                    backgroundColor: "#ffffff",
                    borderWidth:1,
                    borderColor:'lightgray'
                }}
                closeOnBackPressed={true}

                // Setting active styles
                style={{
                    activeOpacity: 1,
                    backgroundColor: "#ffffff",
                }}
            />

Answer 1

如果您希望使用

renderListItem 属性，DropDownPicker 可以让您选择选择器项目。请务必将所有道具传递给您的自定义组件：

<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  placeholder={'Choose a fruit.'}
  renderListItem={(props) => <CustomItem {...props} />}
/>

然后进行自定义（在您的情况下，您想更改

activeOpacity

）；只要确保正确调用 onPress 函数即可：

export default function CustomItem({
  label,
  isSelected,
  onPress,
  item,
  custom,
  ...props
}) {
  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => {
        onPress(item, custom);
      }}
      activeOpacity={0}>
      <Text>{label}</Text>
    </TouchableOpacity>
  );
}

演示