Как динамически установить borderRadius на компонент React Native?

Question

Я пытаюсь отобразить изображения с круглыми границами в FlatList. Тем не менее, я использую flex, поэтому я не знаю абсолютное значение, чтобы положить в borderRadius. Вот что я попробовал:

function Row(obj) {
    const [width, setWidth] = useState(0);

    return (
        <View style={styles.contact}>
            <Image
                style={[styles.thumbnail, {borderRadius: width / 2}]}
                onLayout={({nativeEvent}) => {setWidth(nativeEvent.layout.width);}}
                source={{uri: obj.picture.thumbnail}}
            />
            <View style={styles.contactInfo}>
                <Text>{obj.name}</Text>
                <Text>{obj.phone}</Text>
            </View>
        </View>
    );
}

export default function Contacts() {
    <View style={styles.contactsContainer}>
        <FlatList
            data={contacts}
            renderItem={({ item }) => Row(item)}
            keyExtractor={item => item.id.toString()}
        />
    </View>
}

Это не работает, потому что хуки можно вызывать только внутри тела функционального компонента.

Есть идеи?

Answer 1

Я бы попробовал обернуть этот Image компонент в View и добавить атрибут borderRadius в стиле View вместе с overflow: 'hidden'. Таким образом, вы убедитесь, что изображение на самом деле находится внутри компонента с желаемым радиусом границы.

Что-то похожее на это:

return (
        <View style={styles.contact}>
          <View style={[styles.thumbnail, {borderRadius: width / 2, overflow: 'hidden'}]}>
            <Image
                style={{flex: 1}}
                onLayout={({nativeEvent}) => {setWidth(nativeEvent.layout.width);}}
                source={{uri: obj.picture.thumbnail}}
            />
            <View style={styles.contactInfo}>
                <Text>{obj.name}</Text>
                <Text>{obj.phone}</Text>
            </View>
        </View>
    );

Затем, чтобы определить, как Если у вас есть значение borderRadius, вы можете извлечь ширину или высоту устройства, используя Dimensions из response-native (и примените найденное для него преобразование)

пример:

import {Dimensions} from 'react-native'
let width = Dimensions.get('window').width