css - 带有 Expo 的 Instagram 线性渐变

Question

我正在使用 Expo 开发 react-native 应用程序.

<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” Logo 相同的线性渐变。

你能帮我实现吗？感谢您的宝贵时间

Answer 1

对我来说，我使用的是 nativebase

import { IconButton, Icon, Box } from 'native-base'
import { AntDesign } from "@expo/vector-icons"

const Instagram = () => {

    const gradient_codes = [
        '#fccc63',
        '#fbad50',
        '#cd486b',
        '#8a3ab9',
    ]

    return (
        <Box
            bg={{
                linearGradient: {
                    colors: gradient_codes,
                    start: [0, 0.9],
                    end: [0.5, 0],
                }
            }}
            borderRadius={24}>
            <IconButton
                icon={<Icon as={AntDesign} name='instagram' />}
                _icon={{
                    color: 'white'
                }}
            />
        </Box>
    )
}

应该是这样的 screenshot