React Native Elevation 陰影無法正常工作

Question

我是 React Native 的新手，我嘗試為我的單選按鈕創建一個組件，但是在添加高程時遇到了 Style 的一些問題，它在View內而不是View外添加陰影

這是我的代碼

import {Text, View, StyleSheet} from 'react-native';
import {RadioButton} from 'react-native-paper';
import {
    ScrollView,
    TextInput,
    TouchableOpacity,
} from "react-native-gesture-handler";

function Chosen({values, onChange, defaultIndex, selectedIndexAtt, renderComponent}){
    const [index, setIndex] = useState(defaultIndex ? defaultIndex : 0);

    const getRadioStatus = (itemIndex) => {
        return index == itemIndex ? 'checked' : 'unchecked';
    }

    const handleRadioPress = (itemIndex) => {
        setIndex(itemIndex);
        onChange(itemIndex);
    }

    return(
        <ScrollView style={styles.container}>
            <View style={styles.containerRow}>
                {values.map((item, index)=> {
                    return (<View style={styles.itemContainer}>
                        <View style={styles.item}>
                            {renderComponent(item)}
                            <View style={styles.radioButton}>
                                <RadioButton value={item[selectedIndexAtt ? selectedIndexAtt : index]} 
                                    status={getRadioStatus(item[selectedIndexAtt ? selectedIndexAtt : index])}
                                    onPress={() => {
                                        handleRadioPress(item[selectedIndexAtt ? selectedIndexAtt : index])
                                    }}/>
                            </View>
                        </View>
                    </View>)
                })}
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container:{
        flexDirection: 'column',
        flex: 1
    },
    containerRow:{
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    itemContainer: {
        width: "50%",
        padding: 1
    },
    item: {
        flexDirection: 'row',
        margin: 10,
        borderWidth: 1,
        borderColor: 'rgba(105,105,105,0.6)',
        borderRadius: 15,
        elevation: 0.1
    },
    radioButton: {
        justifyContent: 'center',
        flex: 1,
        alignItems: 'flex-end'
    }
});

export default Chosen;

這就是我從父母那里稱呼它的方式

<Chosen values={dummyData} defaultIndex={dummyData[0].id} selectedIndexAtt='id' renderComponent={(item) => {
                    return (
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    )
                }} onChange={onChange}></Chosen>

結果是這樣的：

高程陰影問題

有人可以幫我嗎？

Answer 1

您必須為 react native 中的陰影提供此功能。 根據需要更改值。

shadowColor: "#000",
shadowOffset: {
    width: 0,
    height: 10,
},
shadowOpacity: 0.5,
shadowRadius: 10,
elevation: 20,