Question

我正在集成React Native应用程序的设计，我想设计一种代表用户的“泡泡”组件。我遇到了两个问题：首先，图像的Alpha层不遵循气泡的边界，而是正方形。使用CSS修复或简单地修改图像会更容易吗？其次，我想对气泡进行随机旋转，但不旋转内部用户的图像。我不确定是否可以通过绝对定位解决此问题。让我知道您的想法！

这是我的气泡组件：

/* @flow */
import React from 'react'
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from 'react-native-responsive-screen'
import styled from 'styled-components/native'

import FillImage from '@components/FillImage'

type UserStatus = 'offline' | 'online'

// Props types
type Props = {
  userImage: string,
  userStatus: UserStatus,
  onTouch: Function,
}

const UserBubble = ({ userImage, userStatus, onTouch }: Props) => (
  <BubbleBackgroundView source={userStatus === 'offline' ? offline : online}>
    <BubbleButton onPress={onTouch}>
      <FillImage source={userImage} />
    </BubbleButton>
  </BubbleBackgroundView>
)

// Assets
const offline = require('@assets/friends/offlineUser.png')
const online = require('@assets/friends/onlineUser.png')

// Styled components
const bubbleRotation = Math.floor(Math.random() * 360)
const BubbleBackgroundView = styled.ImageBackground`
  height: ${hp('8.61%')};
  width: ${wp('18.65%')};
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: rotate(${bubbleRotation}deg);
`
const BubbleButton = styled.TouchableOpacity`
  height: ${hp('9%')};
  width: ${wp('19%')};
`

export { UserBubble as default }

React Native中的图像内部图像

0 个答案: