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

这是行不通的，因为只能在功能组件的内部调用Hook。

有什么主意吗？

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从react-native中提取设备的宽度或高度（并应用对它有用的变换）

一个例子：

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

如何在React Native组件上动态设置borderRadius？

1 个答案: