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

它不起作用，因为 Hooks 只能在功能组件的主体内部调用。

任何想法？

4

1 回答 1

0

我会尝试将此Image组件包装成 a并在's 样式上View添加borderRadius属性，以及. 通过这种方式，您可以确保图像实际上位于具有您想要的边框半径的组件内部。Viewoverflow: '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>
    );

然后，为了确定您的边框半径应该有多大，您可以使用Dimensionsfrom react-native 提取设备的宽度或高度（并应用您认为对它有用的转换）

一个例子：

import {Dimensions} from 'react-native'
let width = Dimensions.get('window').width
于 2020-04-16T22:19:09.273 回答