css - 设计问题按钮 React Native

Question

我正在尝试让这个设计按钮在此处输入图像描述，但我不知道如何制作。有任何想法吗？这是我的实际设计：在此处输入图像描述

这是我的代码：

            <View style={styles.containerButtons}>
                <Card style={styles.cardButtonLeft}>                        
                    <TouchableHighlight style={styles.button} onPress={()=> {}}><FontAwesome5 style={{}} name="heart" color={Colors.background} size={40}/></TouchableHighlight>                        
                </Card>                            
                <Card style={styles.cardButtonRight}>                                                
                    <TouchableHighlight style={styles.button} onPress={()=> {}}><Octicons style={{}} name="zap" color={Colors.background} size={45}/></TouchableHighlight>                            
                </Card>                            
            </View>     

和风格：

containerButtons:{
    alignItems:'center', 
    marginBottom: 30,
    flexDirection: 'row',
    justifyContent:'center'
},
cardButtonLeft:{
    marginHorizontal: 20,         
    width: '20%',         
    alignItems:'center', 
    flexDirection:'row', 
    justifyContent:'space-around', 
    borderRadius: 100,                
    transform:[{translateX: 30}]
},
cardButtonRight:{
    marginHorizontal: 20,         
    width: '20%',         
    alignItems:'center', 
    flexDirection:'row', 
    justifyContent:'space-around', 
    borderRadius: 100,                  
    transform:[{translateX: -30}]
},
button:{
    margin: 15,
    
    flex: 1,
    alignItems:'center',
    borderRadius:15
}

标签： cssreact-nativebuttonstylesstylesheet