React Native의 멋진 아이콘

Question

fontAwesome + 아이콘을 원의 중간에 사용하고 싶습니다. 하나의 아이콘 아이템으로 사용하고 싶습니다. 원 아이콘과 함께 사용하고 그 안에 넣을 수 있다고 읽었지만 작동하지 못했습니다.

import IconFA from 'react-native-vector-icons/FontAwesome';

        <IconFA
         name="plus"
         size={moderateScale(30)}
         color="black"
         style={styles.thumbnail}
         />
        {/* <IconFA
        name="circle-thin"
        size={moderateScale(67)}
        color="white"
      /> */}

  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
  },

또는 'stacked'글꼴 멋진 아이콘에 대해 읽었지만 반응 네이티브에서 사용하는 방법을 이해할 수 없었습니다.

참고: https://jsfiddle.net/1d7fvLy5/1/

스낵 엑스포 :

https://snack.expo.io/9Ild0Q1zG

나는 다음과 같이 만들고 싶다.

나는 또한 <Thumbnail>비슷한 아이콘의 링크를 찾으면를 사용할 수 있지만 온라인에서 그러한 무료 아이콘을 찾을 수 없습니다.

Answer 1

게시 한 JSFiddle 예제는 CSS 테두리 border-radius를 사용하여 원형을 만드는 원을 만듭니다 . react-native에서는 borderRadius퍼센트가 아닌 고정 된 숫자 만 가능 하지만, react-native에서도 거의 동일한 작업을 수행 할 수 있습니다 (편집 :이 제한은 borderRadius속성에 type이 있으므로 typescript에만 적용됩니다 number. 백분율 문자열은 런타임에 작동합니다) .

이 코드를 원하는대로 조정할 수 있지만 이렇게하면 작업이 완료됩니다. IconFA및 CircleBorder두 개의 개별 중첩 구성 요소로 사용할 수 있지만 IconInCircle두 가지를 결합 하는 구성 요소도 만들었습니다 .

const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
  <CircleBorder
    size={circleSize}
    borderWidth={borderWidth}
    borderColor={borderColor}
  >
    <IconFA {...props} />
  </CircleBorder>
);

const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
  <View
    style={{
      width: size,
      height: size,
      borderRadius: 0.5 * size,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderColor,
      borderWidth,
    }}>
    {children}
  </View>
);

IconInCircle: 구성 요소는 국경 세 소품 특정 소요 circleSize, borderWidth하고 borderColor. 다른 모든 소품은 IconFA자식 구성 요소 로 전달됩니다 .

기본적으로 우리가하는 일은 View원형 테두리와 중앙에 콘텐츠 가있는 고정 된 크기 안에 아이콘을 배치하는 것 입니다.

이제 다음과 같이 사용할 수 있습니다.

      <IconInCircle
        name="plus"
        size={30}
        color="black"
        style={styles.thumbnail}
        borderWidth={1}
        circleSize={50}
      />

엑스포 링크

Answer 2

import IconFA from 'react-native-vector-icons/FontAwesome';

<View style={{
  position:'relative',
  justifyContent:'center',
  alignItems:'center',
  width:40,
  height:40,
  backgroundColor:'black'
}}>
  <IconFA name='circle-thin' size={40} color='grey'/>
  <IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />  
</View>

저는 ReactNative를 처음 사용하지만 위의 스 니펫이 귀하의 경우에 작동합니다.

스낵 엑스포

Answer 3

이것을 시도하고 필요에 따라 조정하고 .NET 용 다른 브라우저를 지원하는 것을 잊지 마십시오 flex.

const styles = StyleSheet.create({
  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '1px solid #333',
    borderRadius: '50%'
  },
});