如何在React Native中的另一个组件内创建圆形图像？

jum4pzuy 于 2023-05-01 发布在 React

关注(0)|答案(2)|浏览(148)

我正在尝试使用@shopify/react-native-skia包创建此UI。（具体使用@shopify/react-native-skia包）
在创建时，我无法在圆圈内获得圆形图像。.我想要在圆圈内的头像图像。有人能帮我吗
下面是我尝试的代码：

const Home = () => {

    const [isLoading, setIsLoading] = useState(true)

    const image = //Image url

    useEffect(() => {

            image ? setIsLoading(false) : null

    }, [])

    return (

        <ScrollView style={{flex : 1, backgroundColor : '#010117'}}>

            {!isLoading && 

                <Canvas style={{height : h}}>

                    <Group >

                        <Circle cx={xmiddle} cy={h*0.1} r={radius}>

                            <Paint color={"#060d29"}/>

                            <Paint color={'#a1a1ab'} style='stroke' strokeWidth={2}/>

                        </Circle>

                    </Group>

                </Canvas>

            }

            {isLoading && <ActivityIndicator animating color={"#a1a1ab"} size="large" style={{top : h*0.4}}/>}

        </ScrollView>

    )

}

react-native

来源：https://stackoverflow.com/questions/72296117/how-to-create-a-rounded-image-inside-another-component-in-react-native

2条答案

按热度按时间

yi0zb3m41#

你可以尝试从一个组件创建所有东西，你把它放在一个圆形形状中，然后像这样添加一个边框：

<Group >
return (
...
<Group>
  <Image style={styles.logo} source={require(image)} />
</Group>
...
  );
}

const styles = StyleSheet.create({
  logo: {
    height: 100,
    width: 100,
    borderRadius:150,
    borderWidth: 5,
    borderColor:'white',
  }
});

赞(0）回复(0）举报 2023-05-01

7ivaypg92#

您可以使用Group组件对Image进行舍入
以下是文档链接： www.example.com
下面是一个代码示例，我将图像放在屏幕的中心，并呈现圆形图像

const size = 120;
    const padding = 0;
    const r = 60;

    const roundedRect = rrect(rect(padding, padding, size - padding * 2, size - padding * 2), r, r);

    return (
        <Canvas style={styles.container}>
            <Group origin={point(width / 2 - 60, height / 2 - 60)} clip={roundedRect}>
                <Image
                    x={width / 2 - 60}
                    y={height / 2 - 60}
                    image={profileImage}
                    height={120}
                    width={120}
                />
            </Group>

        </Canvas>
    );

结果如下：

赞(0）回复(0）举报 2023-05-01

我来回答

如何在React Native中的另一个组件内创建圆形图像？

2条答案

相关问题

热门标签

最新问答