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>
}
フックは機能コンポーネントの本体内でのみ呼び出すことができるため、機能しません。
何か案が?