1

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

フックは機能コンポーネントの本体内でのみ呼び出すことができるため、機能しません。

何か案が?

4

1 に答える 1