Instagram线性渐变与世博会

Question

我正在使用Expo开发一个本机应用程序。

<Button
  icon={
     <FontAwesome
       name="send"
       size={24}
       color={'white'}
     />
    }
    text={'Send Content'}
    activeOpacity={0.8}
    textStyle={{ fontWeight: '700' }}
    buttonStyle={{ paddingHorizontal: 20, height: 55 }}
    onPress={() => console.log('send')}
    ViewComponent={require('expo').LinearGradient}
    linearGradientProps={{
      colors: ['#f68ba0', '#ec407a'],
      start: [1, 0],
      end: [0.2, 0],
     }}
  />

使用Native Elements，您可以实现带有线性渐变的按钮，如上所述。

我希望与“Instagram”徽标具有相同的线性渐变。

你能帮我实现吗？ 谢谢你的时间

Answer 1

使用CSS3径向渐变非常简单！

<span class="instagram">
  <span class="fa fa-instagram"></span>
</span>

.instagram {
  display: inline-block;
  width: 250px;
  height: 250px;
  text-align: center;
  border-radius: 40px;
  color: #fff;
  font-size: 220px;
  line-height: 250px;
  vertical-align: middle;
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
}

请看这里：https://codepen.io/jonasloerken/pen/rJzBjj